Next-awesome-skeleton-loader NPM

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