Ladda Button Component In JavaScript – Kaomos Button

Category: Javascript , Loading , Recommended | April 9, 2019
Author: zSacrety
Views Total: 446
Official Page: Go to website
Last Update: April 9, 2019
License: MIT

Preview:

Ladda Button Component In JavaScript – Kaomos Button

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();

You Might Be Interested In:


Leave a Reply