
Security News
Vite Releases Technical Preview of Rolldown-Vite, a Rust-Based Bundler
Vite releases Rolldown-Vite, a Rust-based bundler preview offering faster builds and lower memory usage as a drop-in replacement for Vite.
Buttons with built-in loading indicators, effectively bridging the gap between action and feedback.
npm install ladda
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.
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.
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:
#fff
12
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();
Ladda has been tested in Firefox, Microsoft Edge, Chrome, and Internet Explorer 11. It also Should Work™ in Safari and Internet Explorer 10.
https://github.com/hakimel/Ladda/blob/master/CHANGELOG.md
MIT
[2.0.3] - 2021-12-02
FAQs
Buttons with built-in loading indicators
The npm package ladda receives a total of 39,716 weekly downloads. As such, ladda popularity was classified as popular.
We found that ladda demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Vite releases Rolldown-Vite, a Rust-based bundler preview offering faster builds and lower memory usage as a drop-in replacement for Vite.
Research
Security News
A malicious npm typosquat uses remote commands to silently delete entire project directories after a single mistyped install.
Research
Security News
Malicious PyPI package semantic-types steals Solana private keys via transitive dependency installs using monkey patching and blockchain exfiltration.