Skip to content
/ Ladda Public
forked from hakimel/Ladda

Buttons with built-in loading indicators.

License

Notifications You must be signed in to change notification settings

Ganasist/Ladda

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Ladda

A set of buttons which merge loading indicators into themselves to bridge the gap between action and feedback.

Check out the demo page.

Instructions

Make sure the ladda.css and ladda.js files are included on your page.

If you will be using the loading animation for a form that is submitted to the server (always resulting in a page reload) you can use the bind() method:

// Automatically trigger the loading animation on click
Ladda.bind( 'input[type=submit]' );

// Same as the above but automatically stops after two seconds
Ladda.bind( 'input[type=submit]', { timeout: 2000 } );

If you want JavaScript control over your buttons you can use the following approach:

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

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

Ladda.stopAll();

Browser support

The project is tested in Chrome and Firefox. It Should Work™ in the current stable releases of Chrome, Firefox, Safari as well as IE9 and up.

History

0.3.0

  • Replace spinner GIF with spin.js
  • spinner and label classes are now prefixed with ladda-
  • Built-in progress bars

0.2.0

  • JS API

0.1.0

  • Initial release

License

MIT licensed

Copyright (C) 2013 Hakim El Hattab, http://hakim.se

About

Buttons with built-in loading indicators.

Resources

License

Stars

Watchers

Forks

Packages

No packages published