Skip to content

The skeleton app to show when the contents are loading to hint user "hey!, something should be here and will be load as soon as possible. Expect it

License

Notifications You must be signed in to change notification settings

amirmahdioun/alpha-skeleton

Repository files navigation

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

About

The skeleton app to show when the contents are loading to hint user "hey!, something should be here and will be load as soon as possible. Expect it

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published