Btn-loader

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.

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="https://unpkg.com/[email protected]/dist/app.css">
<script src="https://unpkg.com/[email protected]/dist/app.js" 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>

Example

First step is to use it as a class.

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

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

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

It keeps running the loader for 3 seconds.

Vary the size of the loader using size

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

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

Vary the thickness of the loader using thickness

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

It increases the thickness of the loader by 14 pixels.

Change the text after loading using text-after

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

After loading, the value changes to 'Done'.

Change the color of the loader using color-head

<div>
   <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>
</div>

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

Change the background color of the loader using bck-color

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

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

Remove the button after loading using hide-after

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

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

<div>
  <button class="btn-loader" color-head="red" color-bottom="#DC5B21" color-left="#70AB8F" color-right="#383127">Button</button>
</div>

Example of a 3 star loader

<div>
  <button class="btn-loader" color-head="red" color-bottom="#DC5B21" color-left="#70AB8F">Button</button>
</div>

Example of a 2 star loader

<div>
  <button class="btn-loader" color-head="red" color-bottom="#DC5B21">Button</button>
</div>