https://github.com/hakimel/Ladda
Buttons with built-in loading indicators.
https://github.com/hakimel/Ladda
Last synced: 8 months ago
JSON representation
Buttons with built-in loading indicators.
- Host: GitHub
- URL: https://github.com/hakimel/Ladda
- Owner: hakimel
- License: mit
- Created: 2013-06-05T08:30:13.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2021-12-02T21:28:53.000Z (almost 4 years ago)
- Last Synced: 2025-03-13T09:01:42.307Z (8 months ago)
- Language: JavaScript
- Homepage: http://lab.hakim.se/ladda/
- Size: 337 KB
- Stars: 7,841
- Watchers: 203
- Forks: 863
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome - hakimel/Ladda - Buttons with built-in loading indicators. (JavaScript)
- awesome-swedish-opensource - Ladda
- awesome-frontend-libraries - ladda
- awesome-javascript - Ladda - Buttons with built-in loading indicators. ` ๐ 6 months ago ` (Loading Status [๐](#readme))
- awesome-javascript-cn - ๅฎ็ฝ
- awesome-javascript - Ladda - Buttons with built-in loading indicators. - โ 7388 (Loading Status)
- awesome-loading-indicators - Ladda - Buttons with built-in loading indicators. (JavaScript)
- fucking-awesome-javascript - Ladda - Buttons with built-in loading indicators. (Loading Status / Runner)
- awesome-focusnetworks - Ladda - Buttons with built-in loading indicators. (Loading Status / Runner)
- A-collection-of-awesome-browser-side-JavaScript-libraries-resources-and-shiny-things. - Ladda - Buttons with built-in loading indicators. (Loading Status / Runner)
README
# Ladda
Buttons with built-in loading indicators, effectively bridging the gap between action and feedback.
[Check out the demo page](https://lab.hakim.se/ladda/).
## 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.
```html
Submit
```
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:
```html
Submit
```
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:
```javascript
import * as Ladda from 'ladda';
```
The following approach is recommended for JavaScript control over your buttons:
```javascript
// 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:
```javascript
// 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:
```javascript
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
## License
MIT