https://github.com/hc-oss/tiny-skeleton-loader-react

zero dependency, ultra lightweight (1KB gzipped) skeleton loader component for react 🐥
https://github.com/hc-oss/tiny-skeleton-loader-react

hacktoberfest lightweight loader react shimmer skeleton-loader-component

Last synced: 2 months ago
JSON representation

zero dependency, ultra lightweight (1KB gzipped) skeleton loader component for react 🐥

• Host: GitHub
• URL: https://github.com/hc-oss/tiny-skeleton-loader-react
• Owner: hc-oss
• Created: 2019-10-15T14:49:41.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-01T23:57:22.000Z (over 2 years ago)
• Last Synced: 2025-06-16T17:29:52.179Z (4 months ago)
• Topics: hacktoberfest, lightweight, loader, react, shimmer, skeleton-loader-component
• Language: JavaScript
• Homepage:
• Size: 705 KB
• Stars: 29
• Watchers: 1
• Forks: 7
• Open Issues: 9
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# tiny-skeleton-loader-react

zero dependency, ultra lightweight (1KB gzipped) skeleton loader component for react ✨

![Example](preview.gif)

![GitHub Actions Status](https://github.com/hc-oss/tiny-skeleton-loader-react/workflows/NodeJS/badge.svg)

![NPM](https://img.shields.io/npm/v/tiny-skeleton-loader-react.svg)

![gzip](https://badgen.net/bundlephobia/minzip/tiny-skeleton-loader-react)

## 🔧 Installation

```bash

npm install --save tiny-skeleton-loader-react

```

## 📦 Usage

```tsx

import React from "react";

import SkeletonLoader from "tiny-skeleton-loader-react";

class Example extends React.Component {

  render() {

    return ;

  }

}

```

## 👀 Properties

| Property       | Attribute       | Description             | Type      | Default     |

|----------------|-----------------|-------------------------|-----------|-------------|

| `width`        | `width`         | Loader Width            | `string`  | `"100%"`    |

| `height`       | `height`        | Loader Height           | `string`  | `"1em"`     |

| `background`   | `background`    | Loader background color | `string`  | `"#eff1f6"` |

| `circle`       | `circle`        | Make Skeleton Circle    | `boolean` | `false`     |

| `borderRadius` | `border-radius` | Loader radius           | `string`  | `"4px"`     |

| `block`        | `block`         | Whether to start new    | `boolean` | `true`      |

| `style`        | `style`         | Extra Styles            | `object`  | `{}`        |

| `as`           | --              | The HTML element        | `string`  | `"div"`     |

## License

MIT © [hc-oss](https://github.com/hc-oss)