Ladda Button Component In JavaScript – Kaomos Button

Preview:

Description:

Kaomos Button is a pure JavaScript Ladda Button web component that displays an inline loading indicator inside the action button when a certain action is triggered.

Ideal for submit button that converts the Submit text into a loading spinner when you submit the form or fetch something from an external data source.

You can find more Ladda Button plugins on our jQuery Plugin website.

How to use it:

Install & download.

# NPM
$ npm install kaomos-button --save

Import the Kaomos Button component.

<script src="dist/button.min.js"></script>

// or as an ES module
import 'dist/button.min.js'

Create the Kaomos Button with the following attributes:

• label: button label
• loader-speed: animation speed
• loader-size: size in pixels
• loader-color: color
• loader-width: stroke width

<kaomos-button 
  label='Your Label' 
  loader-speed='2.5' 
  loader-size='60'
  loader-color='#fff' 
  loader-width='4'>
</kaomos-button>

// or via JavaScript
const btn = document.createElement('kaomos-button')
btn.setAttribute(attribute, value)
document.body.appendChild(btn)

API methods.

// Gets the instance
const btn = document.getElementsByTagName('kaomos-button');
// Starts the loading animation
btn.start();
// Stops the loading animation
btn.stop();
// Toggles the loading animation
btn.toggle();
// Checks if the loading animation is running
btn.isRunning();
// Updates the internal variables
btn.update();