Buttons with built-in loading indicators.

Hakim El Hattab

Last update: Jan 3, 2023

Related tags

Loading Status Ladda

Overview

Ladda

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

Check out the demo page.

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.

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

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:

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

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:

import * as Ladda from 'ladda';

The following approach is recommended for JavaScript control over your buttons:

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

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

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

https://github.com/hakimel/Ladda/blob/master/CHANGELOG.md

License

MIT

Comments

No button styles for nice bootstrap integration

Add css file with no button styling for nice integration with bootstrap and probably other frameworks. Meant to be used as an alternative to the standard ladda.min.css file.

opened by tlongren 12
From where can I get /dist directory?

Hi, From where can I get dist directory with compiled version of ladda? I want use it in my PHP application but I can't /dist directory with newest version.

opened by gorgotluk 11
Validity check for email

Regex check for input field of type="email"

Otherwise the spinner will start spinning, while browser will prevent submit() due to required attr and invalid email

opened by MaZZly 11
Add wrapper for jQuery.

I love Ladda and that it's not dependent on anything. But it seems popular to wrap Ladda in a jQuery wrapper for those that want to use it. So I made a thin wrapper that can be loaded optionally by including ladda.jquery.min.js alongside ladda.min.js.

If this is accepted I'm willing to take the same approach to make an AngularJS version.

opened by seriema 11
Include Sass files in npm package and allow $spinnerSize Sass variable to be reassigned
There are 2 commits:

solve this in a way, by isolating transition to padding, and not transitioning background-color and color.

adding !default to sass variable which allows reassigning.

Hope it helps.
opened by zalog 9
Added ability for buttons to specify the color of the generated spinner.

Use Case

Light buttons on darker backgrounds. Being able to set the color of the spinner, while not the most common use case, is a "nice to have" and would reduce having to hack around the limitation in apps.

opened by mikefowler 5
Add Bootstrap 3 and 4 to the test folder
Ladda works well out of box:

Bootstrap 3 https://jsfiddle.net/terales/p3efcqw7/

Bootstrap 4 https://jsfiddle.net/terales/38pf8Lr8/

Maybe we should include them into a test folder?
opened by terales 4
Enhancement for form-related buttons

In HTML5 form context, using the "required" attribute over input fields, when (submit) buttons are binded by Ladda, related required inputs found empty avoid the Ladda animations to be fired on the ladda-ble button.

opened by ronanguilloux 4
Making Ladda a AMD/Common.js Module

This commit moves spin.js into it's own file and makes define or export itself as module if using a module loader. otherwise it loads into the window global as before. Retains the exact same functionality but makes loading it cleaner in many environments.

opened by sloped 4
Update 2.0.3 npm build failure
I'm posting a new issue as I did not receive any feedback on the comment I made in this closed issue: https://github.com/hakimel/Ladda/issues/109

Is there a way to support both node.js and Dart Sass? When building our application we get the following error after the above change was made in v2.0.3:

Module build failed: ModuleBuildError: Module build failed: right: math.div($spinnerSize, -2) + 10; ^ Invalid CSS after "... right: math": expected expression (e.g. 1px, bold), was ".div($spinnerSize, " in <redacted>node_modules/ladda/css/ladda.scss (line 118, column 20)
opened by Donatello-za 3

CSS transition collision with bootstrap 4

Hi,

I am using this library with bootstrap v4.0.0-beta.2 and I notice collision in CSS transition style.

B4:

.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

Ladda:

.ladda-button,
.ladda-button .ladda-spinner,
.ladda-button .ladda-label {
    -webkit-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
    -moz-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
    -ms-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
    -o-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
}

This collision cause very ugly behavior of background-color/color style on hover. Is it possible to remove !important or set transition only for width, height etc. styles for .ladda-button? Or something similar which solve this issue.

Thanks, Dan

opened by Dani216 3

package.json "type": "module" uses javascript/esm vs javascript/auto

Hello,

Thank you for the cool Ladda library. Just wanted to drop a quick note in case anyone had the same issue as me... I googled for a few hours and didn't come up with anything.

I recently updated from 2.0.1 to 2.0.3 and my webpack build broke.

I tracked down the breaking change to this commit and this line:

https://github.com/hakimel/Ladda/commit/b75722fe976f7e12c507dea961134116d21d748b#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R12
https://github.com/hakimel/Ladda/blob/c7a9c44c5e9d6e200bc74771c6570e9bcff46063/package.json#L12

I think this "type": "module" has something to do with a JS loader that was causing expose-loader not to function correctly.

Basically, I have the following code:

import "expose-loader?exposes=Ladda!ladda/js/ladda.js";

which exports Ladda to the global window; and then I can use Ladda on a webpage.

However, with 2.0.3, I got the following JS error in console:

Uncaught ReferenceError: require is not defined
    at Object../node_modules/expose-loader/dist/cjs.js?exposes=Ladda!./node_modules/ladda/js/ladda-exposed.js (ladda-exposed.js:1:1)
    at __webpack_require__ (bootstrap:19:1)
    at Page.ts:22:1
    at Page.ts:23:45
    at Page.ts:23:45

Checking webpack outputs, the 2.0.3 output is:

// BAD
/***/ "./node_modules/expose-loader/dist/cjs.js?exposes=Ladda!./node_modules/ladda/js/ladda-exposed.js":
/*!*******************************************************************************************************!*\
  !*** ./node_modules/expose-loader/dist/cjs.js?exposes=Ladda!./node_modules/ladda/js/ladda-exposed.js ***!
  \*******************************************************************************************************/
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
var ___EXPOSE_LOADER_IMPORT___ = require("-!./ladda.js");
var ___EXPOSE_LOADER_GET_GLOBAL_THIS___ = require("../../expose-loader/dist/runtime/getGlobalThis.js");
var ___EXPOSE_LOADER_GLOBAL_THIS___ = ___EXPOSE_LOADER_GET_GLOBAL_THIS___;
if (typeof ___EXPOSE_LOADER_GLOBAL_THIS___["Ladda"] === 'undefined') ___EXPOSE_LOADER_GLOBAL_THIS___["Ladda"] = ___EXPOSE_LOADER_IMPORT___;
else throw new Error('[exposes-loader] The "Ladda" value exists in the global scope, it may not be safe to overwrite it, use the "override" option')
module.exports = ___EXPOSE_LOADER_IMPORT___;

When you downgrade to 2.0.1, or remove "type": "module" from node_modules\ladda\package.json you get the following webpack output:

// GOOD
/***/ "./node_modules/expose-loader/dist/cjs.js?exposes=Ladda!./node_modules/ladda/js/ladda-exposed.js":
/*!*******************************************************************************************************!*\
  !*** ./node_modules/expose-loader/dist/cjs.js?exposes=Ladda!./node_modules/ladda/js/ladda-exposed.js ***!
  \*******************************************************************************************************/
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

var ___EXPOSE_LOADER_IMPORT___ = __webpack_require__(/*! -!./ladda.js */ "./node_modules/ladda/js/ladda.js");
var ___EXPOSE_LOADER_GET_GLOBAL_THIS___ = __webpack_require__(/*! ../../expose-loader/dist/runtime/getGlobalThis.js */ "./node_modules/expose-loader/dist/runtime/getGlobalThis.js");
var ___EXPOSE_LOADER_GLOBAL_THIS___ = ___EXPOSE_LOADER_GET_GLOBAL_THIS___;
if (typeof ___EXPOSE_LOADER_GLOBAL_THIS___["Ladda"] === 'undefined') ___EXPOSE_LOADER_GLOBAL_THIS___["Ladda"] = ___EXPOSE_LOADER_IMPORT___;
else throw new Error('[exposes-loader] The "Ladda" value exists in the global scope, it may not be safe to overwrite it, use the "override" option')
module.exports = ___EXPOSE_LOADER_IMPORT___;

Basically, with webpack export-loader:

// with "type": "module" you get this:
var ___EXPOSE_LOADER_IMPORT___ = require("-!./ladda.js");
// without "type": "module" you get this:
var ___EXPOSE_LOADER_IMPORT___ = __webpack_require__(/*! -!./ladda.js */ "./node_modules/ladda/js/ladda.js");

After some heavy debugging in export-loader and webpack, it seems that adding "type": "module" in package.json had the effect of changing the loader module type from javascript/auto (good v2.0.1) to javascript/esm (bad v2.0.3).

The fix to correct ladda from using javascript/esm back to javascript/auto was the following rule:

module: {
      rules: [
         {
            test: /ladda.js$/,
            type: 'javascript/auto'
         },

Hope that helps someone; -- also not sure if the "type": "module" was important or not (or something needs to change for better webpack compatibility).

Hope this helps someone. Feel free to close the issue as you see fit. :+1: :sunglasses:

opened by bchavez 0

Ladda button and validator

Hello, I'm working with Ladda buttons for my ASP.Net webforms application. So far they are working perfectly with one only detail.

Suppose that I have a textbox with one validator. I also have a button which will implement the Ladda appearance when clicked. Suppose that I click the button and the validator triggers responding that the textbox is invalid. In this case the the button continues to display the spinner.

Any Idea on how to approach that scenario specifically for ASP.Net webforms will be appreciated.

thank you in advance

Adrian

opened by adrianlfns 1
Please add dist or documentation how to use with webpack bundles!

I want to use Ladda in my project but I can not get it running. When using npm package and importing with webpack, there is no global namespace Ladda after running webpack. Tried to transpile it in own package with OutputLibrary option, but still no success.

I would be very happy if there was a pre-transpiled and minimize ladda.min.js with all needed dependencies and an ladda.min.css which can be used out-of-the-box.

Not everyone is using webpack or similiar and even when using webpack it is not straight forward to use :-(

opened by DarthSonic 0
Add bundling hints to the README?
Greets team Ladda. It's mentioned in the README.md that it’s "recommended to use a bundler such as Rollup, Parcel, or Webpack to create a production-ready code bundle."

For someone that's:

never used Rollup.js before, but found webpack to be painful

really likes Ladda, but needs to use it on an oldschool LAMP site

... hitting a dead end like that stunk — just not as much as the thought of diving back down the webpack docs hole.

To help future Ladda users that find themselves in a similar situation — wanting to use the latest version instead of an outdated fork, and being stuck (for now) under an aging LAMP — I dropped in (thread jacked ... long story) a HOWTO over here.

The important bits are:

Transpile Ladda:

rollup --name Ladda --globals spin.js:Spin --input ladda.js --format iife --file ladda.iife.js

Transpile the Ladda dependency, Spin.js:

rollup --silent --name Spin --input spin.js --format umd --file spin.umd.js

... And you're done! The rest of the documented Ladda magic works great!

Would you guys be willing to drop a bundler example, like the two rollup cli lines above, into the README.md? ... Or would you accept a PR?

Look on the bright side, with any luck we won’t need bundlers soon!?

Thanks for considering this guys.

-Dan
opened by cube-dan 0
Where is the "dist" folder?

I'm tyring to download Ladda for inclusing in my .NET Core project. Where actually is the "Dist" folder the docs refer to? I can't seem to find the CSS file.

EDIT: It seems ladda only works if you're using Node. Is there any way to use it without the Node.js requirement?

opened by nmg196 3

Owner

Hakim El Hattab

Swedish JavaScript coder and CSS tweaker • Co-founder of @slides • Creator of reveal.js

GitHub http://lab.hakim.se/ladda/

A collection of loading spinners animated with CSS

Single Element CSS Spinners This is a collection of loading spinners animated with CSS. Each spinner consists of a single div with a class of loader a

7k Dec 31, 2022

Functional, simple and customizable UI buttons for react native. Also contains loading functionality and automatically changes color for dual tone buttons. TypeScript support.

React Native UI Buttons ✨ Installation If you want to use icons make sure you have react-native-vector-icons installed in your project. npm install --

6 Dec 5, 2022

A collection of loading indicators animated with CSS

SpinKit Simple loading spinners animated with CSS. See demo. SpinKit only uses (transform and opacity) CSS animations to create smooth and easily cust

19.1k Jan 3, 2023

Fnon is a client-side JavaScript library for models, loading indicators, notifications, and alerts which makes your web projects much better.

???????? Fnon is the name of my late mother, It's an Arabic word which means Art, I created this library in honor of her name. Fnon is a client-side J

5 Sep 11, 2022

LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.

LazyLoad is a lightweight (2.4 kB) and flexible script that speeds up your web application by deferring the loading of your below-the-fold images, vid

7.1k Jan 2, 2023

Fast and lightweight dependency-free vanilla JavaScript polyfill for native lazy loading / the awesome loading='lazy'-attribute.

loading="lazy" attribute polyfill Fast and lightweight vanilla JavaScript polyfill for native lazy loading, meaning the behaviour to load elements rig