https://github.com/ascii-16/react-skeleton-loader

https://github.com/ascii-16/react-skeleton-loader

Last synced: 20 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/ascii-16/react-skeleton-loader
• Owner: ascii-16
• License: mit
• Created: 2021-06-01T19:15:05.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-06-04T07:47:57.000Z (over 3 years ago)
• Last Synced: 2024-10-16T19:53:58.759Z (about 1 month ago)
• Language: TypeScript
• Size: 477 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Welcome to react-skeleton-load 👋



  

    

  

  

    

  



> Skeleton loader for react

### 🏠 [Homepage](https://github.com/akhilchandrangit/react-skeleton-loader)

## Installation and usage

Install react-skeleton-load

```sh

npm i react-skeleton-load

```

```sh

yarn add react-skeleton-load

```

Now you can import react-skeleton-load in any of your components

```javascript

import SkeletonLoader from 'react-skeleton-load';

const Articles = () => {

  return (

    

  )

}

```

## Props

### height (number | string)

number

Required

Height of loader(px)

```javascript

 

```

### width (number | string)

Required

Width of loader

```javascript

 

 

```

### count (number)

Default: 1

Specifies the number of loaders to be rendered.

```javascript

 

```

### className (string)

Custom class name for loader element

```javascript

 

```

### wrapperClass (string)

Custom class name for wrapper element

```javascript

 

```

### color (string)

Custom color for loader in hex

```javascript

 

```

### style (React.CSSProperties)

Custom styles for loader element. Any of the properties in React's CSSProperties can be used.

```javascript

 

```

### shape ("rectangle" | "circle")

Default: "rectangle"

Defines the shape of loader.

```javascript

 

```

### hideAnimation (boolean)

Default: false

If set to true, the loader animation will be stopped.

```javascript

 

```

### hideGradient (boolean)

Default: false

If set to true, the background gradient will be removed.

```javascript

 

```

### borderRadius (number | string)

Changes the border radius of loader.

```javascript

 

```

## Author

👤 **Akhil**

* Website: https://github.com/akhilchandrangit/react-skeleton-loader

* Github: [@akhilchandrangit](https://github.com/akhilchandrangit)

## Show your support

Give a ⭐️ if this project helped you!