This package is designed for skeletons to use when contents are loading!
It is very easy to use...
use it everywhere you want to have skeleton before load the contents
<Skeleton />
This component gives two required props First is : mode ('article' , 'profile' , 'post' , 'h1' , 'h2' , 'h3' , 'h4' , 'h5' , 'h6' , 'title' , 'body' , 'caption' , 'avatar') Use article mode for article. It has a heading and body for this purpose and use profile mode for profiles also it has an avatar, name section and description
Second props is : animation ('pulse' , 'wave')
<Skeleton mode={'article'} animation={'pulse'} />
<Skeleton mode={'article'} animation={'wave'} />
<Skeleton mode={'profile'} animation={'pulse'} />
<Skeleton mode={'profile'} animation={'wave'} />
<Skeleton mode={'h1'} animation={'wave'} />
<Skeleton mode={'h1'} animation={'pulse'} />
<Skeleton mode={'h2'} animation={'wave'} />
<Skeleton mode={'h2'} animation={'pulse'} />
<Skeleton mode={'h3'} animation={'wave'} />
<Skeleton mode={'h3'} animation={'pulse'} />
<Skeleton mode={'h4'} animation={'wave'} />
<Skeleton mode={'h4'} animation={'pulse'} />
<Skeleton mode={'h5'} animation={'wave'} />
<Skeleton mode={'h5'} animation={'pulse'} />
<Skeleton mode={'h6'} animation={'wave'} />
<Skeleton mode={'h6'} animation={'pulse'} />
<Skeleton mode={'body'} animation={'wave'} />
<Skeleton mode={'body'} animation={'pulse'} />
<Skeleton mode={'title'} animation={'wave'} />
<Skeleton mode={'title'} animation={'pulse'} />
<Skeleton mode={'caption'} animation={'wave'} />
<Skeleton mode={'caption'} animation={'pulse'} />
| Props | Default | Description | Options |
|---|---|---|---|
| mode | - | mode of the skeleton | (Mode table) |
| animation | - | animation of skeleton | wave, pulse |
| sx | - | CSS object properties | - |
| Mode | Description |
|---|---|
| article | Contains one h3 and 3 body skeleton element |
| profile | Contains avatar, title and 2 body skeleton element |
| post | Contains image, title, body and caption skeleton element |
| h1 - h2 - h3 - h4 - h5 - h6 | Contains related skeleton element |
| title | Title skeleton element to use in title section of card |
| body | Body skeleton element to use in body section of card |
| caption | Caption skeleton element to use for captions |
| avatar | Avatar skeleton element to use for avatars |
Please leave comment and tell me if there is any bug or problem and give me your suggestions to improve