alphamike-skeleton

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