Github url

Ladda

by hakimel

hakimel /Ladda

Buttons with built-in loading indicators.

7.7K Stars 906 Forks Last release: Not found MIT License 206 Commits 30 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Ladda

Buttons with built-in loading indicators, effectively bridging the gap between action and feedback.

Check out the demo page.

Installation

npm install ladda

Module bundling

Ladda 2.x is distributed as a standard ES6 module. Since not all browsers/environments support native ES6 modules, it is recommended to use a bundler such as Rollup,Parcel, or Webpack to create a production-ready code bundle.

Usage

CSS

You will need to include ONE of the two style sheets in the /dist directory. If you want the button styles used on the demo page, use the ladda.min.css file. If you want to have the functional buttons without the visual style (colors, padding, etc.), use the ladda-themeless.min.css file.

HTML

Below is an example of a button using the

expand-right

animation style.

<button class="ladda-button" data-style="expand-right">Submit</button>

When the JS code runs to bind Ladda to the button, the

ladda-button

class will be automatically added if it doesn't already exist. Additionally, a span with class

ladda-label

will automatically wrap the button text, resulting in the following DOM structure:

<button class="ladda-button" data-style="expand-right">
    <span class="ladda-label">Submit</span>
</button>

Buttons accept the following attributes: - data-style: one of the button styles [required] - expand-left, expand-right, expand-up, expand-down - contract, contract-overlay - zoom-in, zoom-out - slide-left, slide-right, slide-up, slide-down - data-color: green/red/blue/purple/mint - data-size: xs/s/l/xl, defaults to medium - data-spinner-size: pixel dimensions of spinner, defaults to dynamic size based on the button height - data-spinner-color: a hex code or any named CSS color, defaults to

#fff
  • data-spinner-lines: the number of lines for the spinner, defaults to
    12

JavaScript

Start by importing the Ladda module:

import \* as Ladda from 'ladda';

The following approach is recommended for JavaScript control over your buttons:

// Create a new instance of ladda for the specified button var l = Ladda.create(document.querySelector('.my-button')); // Start loading l.start(); // Will display a progress bar for 50% of the button width l.setProgress(0.5); // Stop loading l.stop(); // Toggle between loading/not loading states l.toggle(); // Check the current state l.isLoading(); // Delete the button's ladda instance l.remove();

To show the loading animation for a form that is submitted to the server (always resulting in a page reload) the

bind()

method can be used:

// Automatically trigger the loading animation on click Ladda.bind('button[type=submit]'); // Same as the above but automatically stops after two seconds Ladda.bind('button[type=submit]', {timeout: 2000});

Note: when using the

bind()

method on buttons that are inside a form, loading indicators will not be shown until the form is valid.

All loading animations on the page can be stopped by using:

Ladda.stopAll();

Browser support

Ladda has been tested in Firefox, Microsoft Edge, Chrome, and Internet Explorer 11. It also Should Work™ in Safari and Internet Explorer 10.

Changelog

https://github.com/hakimel/Ladda/blob/master/CHANGELOG.md

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.