Customizable Button Loader In JavaScript – Btn-loader

Category: Javascript , Loading | August 27, 2018
Author: aayush1408
Views Total: 849
Official Page: Go to website
Last Update: August 27, 2018
License: MIT

Preview:

Customizable Button Loader In JavaScript – Btn-loader

Description:

Btn-loader is a tiny, dependency-free JavaScript library that replaces the regular button with a customizable loading indicator when clicked.

Ideal for indicating the loading status when an action is performed.

How to use it:

Insert the Btn-loader’s files into the HTML file.

<link rel="stylesheet" href="dist/app.css">
<script src="dist/app.js" async></script>

Create a loader by adding the class ‘btn-loader’ to the button and config the button loading with the following attributes:

  • timer: auto close after x seconds
  • size: size of loader (sm, md, lg, xl)
  • thickness: thickness in pixels
  • color-head: head color
  • color-bottom: bottom color
  • color-left: left color
  • color-right: right color
  • text-after: text for the button when the loading is finished
<button class="btn-loader" 
        timer="4" 
        size="xl" 
        thickness="16" 
        color-head="red" 
        color-bottom="#DC5B21" 
        color-left="#70AB8F" 
        color-right="#383127" 
        text-after="Done">
        Action Button
</button>

You Might Be Interested In:


Leave a Reply