JSPM – btn-loader@1.0.5

Package Exports

btn-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (btn-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

By CDN

<link rel="stylesheet" type="text/css" href="https://unpkg.com/btn-loader@1.0.5/dist/app.css">
<script src="https://unpkg.com/btn-loader@1.0.5/dist/app.js" async></script>

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>