Skip to content

Latest commit

 

History

History
76 lines (64 loc) · 3.05 KB

README.md

File metadata and controls

76 lines (64 loc) · 3.05 KB

Skeletons

This package is designed for skeletons to use when contents are loading!
It is very easy to use...

How? Let's go

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

Props Default Description Options
mode - mode of the skeleton (Mode table)
animation - animation of skeleton wave, pulse
sx - CSS object properties -

Modes

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