Make Beautiful, simple and fully customizable animated next-awesome-skeleton-loader that implements a skeleton-like loader.
Loader Module for [webpack](https://webpack.js.org/) to execute your custom procedure. Its works as your's custom loader.
By default, next-awesome-skeleton-loader only outputs the input content. When you specify a function, next-awesome-skeleton-loader executes your function with the input content, and outputs its result. The function does something, it might edit the content, it might parse the content and indicate something in a console, it might do anything else.
next-awesome-skeleton-loader
A Next Awesome skeleton loader library for Next JS.
next-awesome-skeleton-loader is useful when:
Intall via NPM OR Yarn
npm i next-awesome-skeleton-loader
yarn add next-awesome-skeleton-loader
Components
Row
Row Next Awesome Skeleton Loader which has wide range of use.
import { SekeltonLoader, SkeltonCircle } from 'next-awesome-skeleton-loader'
<div className='container mx-auto'>
<SekeltonLoader className='flex gap-10 my-20 w-full'>
<SkeltonCircle size={130} />
<SkeltonCircle size={130} />
<SkeltonCircle size={130} />
</SekeltonLoader>
</div>
Demo
Click here Demo 👌
Basic Usage
The components you create should have loading states embeded in them.
import { SekeltonLoader, SkeltonCircle, SkeletonRectangle } from 'next-awesome-skeleton-loader'
<div className='container mx-auto'>
<SekeltonLoader className='flex gap-2 my-20 w-80'>
<SkeltonCircle size={80} />
<SkeletonRectangle lines={3} unEqualWidth gap={9} className='bg-gray-200 rounded-md' size={80} />
</SekeltonLoader>
<SekeltonLoader className='flex gap-2 my-20 w-80'>
<SkeltonCircle size={80} />
<SkeletonRectangle lines={3} unEqualWidth gap={9} className='bg-gray-200 rounded-md' size={0} />
</SekeltonLoader>
<SekeltonLoader className='w-80'>
<SkeletonRectangle height={100} className='bg-gray-300 rounded-md' size={0} />
</SekeltonLoader>
<SekeltonLoader className='flex gap-10 my-20 w-full'>
<SkeltonCircle size={130} />
<SkeltonCircle size={130} />
<SkeltonCircle size={130} />
</SekeltonLoader>
<SekeltonLoader>
<SkeletonRectangle lines={6} unEqualWidth gap={9} className='bg-gray-200 rounded-md' size={40} />
</SekeltonLoader>
</div>
Props
Prop | Type | Default | Description |
---|
lines | number | 3 | The unlimited lines of the element |
size | number | "80" | The (max) size of your element |
unEqualWidth | number | 0.25 | Amount of unEqualWidth randomness |
height | number | 100 | Amount of height randomness |
gap | number | 9 | gap of the element |
width | number | 100 | width of the element |
height | number | 100 | height of the element |
className | string | "bg-gray-300" | the background color of the element |
Licence
MIT