Skip to content

Latest commit

 

History

History
145 lines (109 loc) · 3.96 KB

README.md

File metadata and controls

145 lines (109 loc) · 3.96 KB
Raw

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.

npm npm Codacy Badge

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/btn-loader@1.0.5/dist/app.css">
<script src="https://unpkg.com/btn-loader@1.0.5/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>