https://github.com/yisheng90/react-loading
🤚 A loading skeleton component built on React
https://github.com/yisheng90/react-loading
component component-lib css frontend javascript library loading react react-loading skeleton-template web
Last synced: 3 months ago
JSON representation
🤚 A loading skeleton component built on React
- Host: GitHub
- URL: https://github.com/yisheng90/react-loading
- Owner: yisheng90
- License: mit
- Created: 2020-02-22T08:18:34.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-09-17T05:26:13.000Z (10 months ago)
- Last Synced: 2025-03-25T09:12:01.396Z (4 months ago)
- Topics: component, component-lib, css, frontend, javascript, library, loading, react, react-loading, skeleton-template, web
- Language: JavaScript
- Homepage:
- Size: 8.29 MB
- Stars: 17
- Watchers: 1
- Forks: 4
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
#  React Loading
[](#contributors-)
[](https://travis-ci.org/yisheng90/react-loading)
[](https://codecov.io/gh/yisheng90/react-loading)
[](https://github.com/dwyl/esta/issues)
Loading Skleton component building block to easily create placholder loadings.
### Features
🎨 **Customizable** - You can change the color, size and shape of the skeleton
🎮 **Plug and Play** - You can just import the component and start using it
🏠 **Building block** - You can use it as a building block to build complex loading component
🧸 **Easy to adapt** - It is a react component.
### Docs
[Storybook](https://yisheng90.github.io/react-loading/?path=/docs/react-loading-welcome--page)
### Getting Started
Install via `yarn` or `npm`
```bash
npm install @yisheng90/react-loading --save
```
or
```bash
yarn add @yisheng90/react-loading
```
### Usage
There are two ways to use it.
**1. Use it as a component**
```jsx
import Skeleton from "@yisheng90/react-loading";
;
```
**2. Use it as a building block**
```jsx
import Skeleton from "@yisheng90/react-loading";
const CardSkleton = () => (
);
```
### Props
**`rows?: number`**
Defaults to 1. It is used to determine the number of rows to be display.
_notes: This option will be ignored if `circle` is set as true_
**`width?: number | string`**
Defaults to 100%. It is used to set the width of the skeleton. You can set it using `%`, `rem` or `px`.
**`height?: number | string`**
Defaults to 100%. It is used to set the height of the skeleton. You can set it using `%`, `rem` or `px`.
**`circle?: boolean`**
Defaults to false. It is used to set shape of the skleton.
**`color?: string`**
It is used to set the color of the skleton. You can set it using `hex`, `rgb` or `rgba`.
**`translucent?: boolean`**
Defaults to false. It is used to set the opacity of the skleton.
**`radius?: number`**
Defaults to 4px. It is used to determine the border radius of the rows. The unit is in `px`.
_notes: This option will be ignored if `circle` is set as true_
### Examples
#### Rows
```jsx
```
#### Width
```jsx
```
#### Height
```jsx
```
### Circle
```jsx
```
### Color
```jsx
```
### Translucent
```jsx
```
## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
## License
[MIT](https://choosealicense.com/licenses/mit/)
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!