Buttons With Built-in Loading Indicators Plugin – Ladda

Ladda is a unique UI concept which create attractive loading indicators for button. Basically the concept is planned for use with any types of form where it gives users immediate feedback upon for submission. Loading animation can be extended from left, right, up and down, also supports progress bar when the button is loading.

Features:

• Supports on all modern browsers and devices.
• Lightweight and easy to implement.
• Loading effects can be extend from left, right, up and down.
• Supports progress bar on loading.

How to use it:

1. Include the Javascript spin.min.js and ladda.min.js at the bottom of the web page.

<script src="/path/to/spin.min.js"></script>

<script src="/path/to/ladda.min.js"></script>

2. Include the CSS ladda.min.css in the header of the page.

<link rel="stylesheet" href="/path/to/ladda.min.css">

3. Add the basic HTML to the page.

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

– OR –

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

4. Initialize the plugin and we’re ready to go.

// 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});

Button 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