A javascript library for handling button loading in a beautiful and clean way.

Usage no npm install needed!

<script type="module">
  import btnLoader from '';



Btn-loader is used to make beautiful and customizable loaders according to the user's needs in the simplest possible manner. Check out the example here Btn-loader.

npm npm

Check out the source code here, and feel free to contribute.

  • implemented with css. No canvas, png or jpg sprites messing around.
  • less than 2KB when minified.
  • optimised and production ready code in dist/ folder.
  • CDN provided at unpkg
  • no extra dependency used
  • Cross browser functionality

Installation steps

  1. By CDN
<link rel="stylesheet" type="text/css" href="">
<script src="" async></script>
  1. By downloading the package
  • first install with npm install btn-loader
  • then include these files in your html.
<link rel="stylesheet" type="text/css" href="node-modules/btn-loader/dist/app.css">
<script src="node-modules/btn-loader/dist/app.js"></script>

First step is to use it as a class.

   <button class="btn-loader">Button</button>

This will generate a default loader, to modify the default loader use the attributes given below.

Cool Attributes

Vary the timer of the loader using timer

   <button class="btn-loader" timer="3">Button</button>

It keeps running the loader for 3 seconds.

Vary the size of the loader using size

   <button class="btn-loader" size="xl">Button</button>

btn-loader provides 4 sizes, xl lg md sm.

Vary the thickness of the loader using thickness

   <button class="btn-loader" thickness="14">Button</button>

It increases the thickness of the loader by 14 pixels.

Change the text after loading using text-after

   <button class="btn-loader" text-after="Done">Button</button>

After loading, the value changes to 'Done'.

Change the color of the loader using color-head

   <button class="btn-loader" color-head="#E9C92D">Hex-Button</button>
   <button class="btn-loader" color-head="rgb('1.4','2.3','2')">Rgb-Button</button>
   <button class="btn-loader" color-head="green">Button</button>

It changes the color and btn-loader works with all color codes.

Change the background color of the loader using bck-color

   <button class="btn-loader" bck-color="#E9C92D">Hex-Button</button>

It changes the background color and btn-loader works with all color codes.

Remove the button after loading using hide-after

   <button class="btn-loader" color-head="#E9C92D" hide-after="true">Button</button>

It hides the button after the loader completes.

Creating a Super-Loader

Super Loaders are those loaders which provide more than one color.

Example of a 4 star loader
  <button class="btn-loader" color-head="red" color-bottom="#DC5B21" color-left="#70AB8F" color-right="#383127">Button</button>
Example of a 3 star loader
  <button class="btn-loader" color-head="red" color-bottom="#DC5B21" color-left="#70AB8F">Button</button>
Example of a 2 star loader
  <button class="btn-loader" color-head="red" color-bottom="#DC5B21">Button</button>