Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/msurguy/ladda-bootstrap

Ladda buttons concept originally by @hakimel, example using Bootstrap 3 by @msurguy
https://github.com/msurguy/ladda-bootstrap

bootstrap bootstrap3 ladda spinner

Last synced: about 2 months ago
JSON representation

Ladda buttons concept originally by @hakimel, example using Bootstrap 3 by @msurguy

Host: GitHub
URL: https://github.com/msurguy/ladda-bootstrap
Owner: msurguy
License: mit
Archived: true
Created: 2013-09-08T23:24:54.000Z (about 11 years ago)
Default Branch: master
Last Pushed: 2017-12-31T21:12:36.000Z (over 6 years ago)
Last Synced: 2024-07-18T17:31:46.978Z (2 months ago)
Topics: bootstrap, bootstrap3, ladda, spinner
Language: JavaScript
Homepage: http://msurguy.github.io/ladda-bootstrap/
Size: 91.8 KB
Stars: 1,237
Watchers: 49
Forks: 253
Open Issues: 25
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome-bootstrap - ladda button - bootstrap/) (add-ons / buttons)

README

# Project INACTIVE

There is now no need to maintain this project as Ladda operates well on its own with Bootstrap and demo pages could be found in the original Ladda repository: https://github.com/hakimel/Ladda/tree/master/test

# Ladda for Bootstrap 3

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

[Check out the demo page](http://msurguy.github.io/ladda-bootstrap/).

## 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.

```html
Submit
```

Buttons accepts three attributes:
- **data-style**: one of the button styles, full list in [demo](http://lab.hakim.se/ladda/) *[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](http://css-tricks.com/snippets/css/named-colors-and-hex-equivalents/).

#### 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:

```javascript
// 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:

```javascript
// Create a new instance of ladda for the specified button
// Please note that this must be done after the button has been
// added to the DOM.
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:

```javascript
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