Make Beautiful, simple and fully customizable animated next-awesome-skeleton-loader that implements a skeleton-like 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
# or
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