meteor-ladda-bootstrap's Introduction

Ladda for Bootstrap 3

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

Instructions

Please see the demo page for the details: (http://msurguy.github.io/ladda-bootstrap/).

HTML

Ladda buttons must be given the class ladda-button and the button label needs to have the ladda-label class. The ladda-label will be automatically created if it does not exist in the DOM. Below is an example of a button which will use the expand-right animation style.

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

Buttons accepts three attributes:

data-style: one of the button styles, full list in demo [required]
data-color: green/red/blue/purple/mint
data-size: xs/s/l/xl, defaults to medium
data-spinner-size: 40, pixel dimensions of spinner, defaults to dynamic size based on the button height
data-spinner-color: A hex code or any named CSS color.

JavaScript

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.

License

MIT licensed

meteor-ladda-bootstrap's People

Contributors

Stargazers

Watchers

meteor-ladda-bootstrap's Issues

Please update

This version is a bit behind the current production version of the original code. It would be nice to have the most up to date version as a package.

jQuery lib

Hey Josh, could you also attach the jQuery lib for completeness (also so I could use it?). Thx!

https://raw.githubusercontent.com/hakimel/Ladda/master/js/ladda.jquery.js

Issue Regarding Meteor Load Sequence

I'm not sure whether this is just a matter of my own setup, but in my case, the load order for the JavaScript files was crucial.

It was necessary for spin.js to load first followed by ladda.js.

When using unmodified meteor-ladda-bootstrap package, I encountered:

uncaught TypeError: undefined is not a function

in createSpinner when the function attempts to instantiate Spinner.

By renaming spin.js to _spin.js I was able to force the system to load _spin.js first. In my case, this resolved the issue. BTW I'm using Meteor 1.0.4.1 (bleeding edge at the time of this writing).

Recommend Projects