Highly customizable skeleton loader component

Are you loosing your patience looking at a blank screen when you open your app? That can impact your viewers or clients. So let's change that!

My first npm published library

I made this skeleton loader library of components with customization and adaptability in mind. Don't be afraid to make your loader unique!

Better UX
Skeleton loaders steal users' attention and create the illusion of faster page load times. They also create anticipation so the user knows the placement of the loaded content.
Customizable
You can change the parameters of the component so that the loader fits perfectly with your final loaded content. There are endless variations to try out.
Easy to use
Detailed documentation with lots of examples to understand how this component works and how you can use it at its best. Just npm install and you are ready to go.
Lightweight
Only 10.62 KB on top of your node_modules. This light and independent package also won't install any other new dependencies.
Open-source
You can download and use this library for free. Also the code base is available on GitHub and open to collaboration and feedback from any contributor.
Web components
This is a collection of web components, so this library will fit like a glove with any type of application and framework you have.

Installation

Just copy the command below, paste it in your terminal (make sure to be in the root folder of your project), run it and let the magic begins.

$ npm install sk-loader Copy

You can find more information about setting up the package on the Getting Started page.

Examples

Attention! This page is fully loaded!
Don't be fooled by the loading content. This examples have the main purpose of displaying the loader components.

Header

Paragraph

Image

Cards

Masonry Layout