Customizable Button Loader In JavaScript – Btn-loader

Preview:

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>