PHPackages                             uvicate/ladda - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. uvicate/ladda

ActiveLibrary[Utility & Helpers](/categories/utility)

uvicate/ladda
=============

Buttons with built-in loading indicators

06.5kJavaScript

Since Nov 19Pushed 12y ago2 watchersCompare

[ Source](https://github.com/uvicate/Ladda)[ Packagist](https://packagist.org/packages/uvicate/ladda)[ RSS](/packages/uvicate-ladda/feed)WikiDiscussions master Synced 3d ago

READMEChangelogDependenciesVersions (1)Used By (0)

Ladda
=====

[](#ladda)

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

[Check out the demo page](http://lab.hakim.se/ladda/).

Instructions
------------

[](#instructions)

Release downloads and change history is available here .

The compiled files for the project that you should be using are available in the **/dist** directory. You will need to include both the **ladda.min.js** and **spin.min.js** files as well as ONE of the two style sheets. If you want the button styles used in the [Ladda example page](http://lab.hakim.se/ladda) 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

[](#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.

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

[](#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();
```

Module
------

[](#module)

The spinner and Ladda can be loaded as a module using either Common.js or AMD.

```
// Using Require.js
define(['ladda'], function(Ladda) {
	// Make Buttons Here
});
```

Browser support
---------------

[](#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.

Changelog
---------

[](#changelog)

License
-------

[](#license)

MIT licensed

Copyright (C) 2013 Hakim El Hattab,

###  Health Score

25

—

LowBetter than 37% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity19

Limited adoption so far

Community14

Small or concentrated contributor base

Maturity41

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 78.9% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/675b0d79d51f7fab64ab9c5b0384f891ff675ccd5a7e194bc04aa5b73ed1d26a?d=identicon)[victorhqc](/maintainers/victorhqc)

---

Top Contributors

[![hakimel](https://avatars.githubusercontent.com/u/629429?v=4)](https://github.com/hakimel "hakimel (45 commits)")[![victorhqc](https://avatars.githubusercontent.com/u/726113?v=4)](https://github.com/victorhqc "victorhqc (4 commits)")[![ronanguilloux](https://avatars.githubusercontent.com/u/313677?v=4)](https://github.com/ronanguilloux "ronanguilloux (3 commits)")[![klaemo](https://avatars.githubusercontent.com/u/778624?v=4)](https://github.com/klaemo "klaemo (2 commits)")[![obmarg](https://avatars.githubusercontent.com/u/556490?v=4)](https://github.com/obmarg "obmarg (1 commits)")[![botcheddevil](https://avatars.githubusercontent.com/u/1572583?v=4)](https://github.com/botcheddevil "botcheddevil (1 commits)")[![zack9433](https://avatars.githubusercontent.com/u/1610642?v=4)](https://github.com/zack9433 "zack9433 (1 commits)")

### Embed Badge

![Health badge](/badges/uvicate-ladda/health.svg)

```
[![Health](https://phpackages.com/badges/uvicate-ladda/health.svg)](https://phpackages.com/packages/uvicate-ladda)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)