Integrating LADDA for Engaging Loading Effects in Buttons

By . in Web Design. Updated on .

Webpages can be brought to life with various animations, from animated text and modal boxes to transitions and progress indicators. Progress indicators, often bars, visually display the extent of progress made. If you’re intrigued by incorporating progress indicators within buttons, explore Ladda.

Ladda, crafted by Hakim El Hattab, is a jQuery plugin that introduces a loading effect within buttons. This UI concept bridges the gap between action and feedback, offering users a loading indicator directly in the button, eliminating the need to navigate away from the page. A WordPress version of Ladda is also available.

Getting Started

To use Ladda, begin by incorporating the ladda.min.js and spin.min.js files from its GitHub page into your project as follows:

 <script src="js/spin.min.js"></script> 
 <script src="js/ladda.min.js"></script>

Next, to apply Ladda’s default themes to your buttons, include the ladda.min.css file. For function-only buttons without the themes, use ladda-themeless.min.css instead.

 <link rel="stylesheet" href="dist/ladda.min.css">

Setting Up Your Button

To integrate Ladda’s loading effect into your buttons, simply add the ladda-button class to your button element. Here’s how you can do it:

 <button class="ladda-button" data-color="mint" data-style="expand-right" data-size="xl">Submit</button>

Beyond just integrating Ladda, you can customize your button’s appearance and behavior through data attributes. The data-style attribute, for example, defines the animation style. Discover all available styles on the demo page.

For more customization, use data-color to alter the button’s color and data-size to adjust its size to your preference.

Example of a button with Ladda loading effect

Integrating with Server Actions

To link the loading animation with server submissions (which reloads the page post-animation), we use the bind() method. This method connects the progress buttons to simulate the loading process:

<script>
Ladda.bind('button', {
  callback: function(instance) {
    var progress = 0;
    var interval = setInterval(function() {
      progress = Math.min(progress + Math.random() * 0.1, 1);
      instance.setProgress(progress);

      if(progress === 1) {
        instance.stop();
        clearInterval(interval);
      }
    }, 200);
  }
});
</script>

You can also manage your buttons dynamically using JavaScript API as follows:

<script>
	var l = Ladda.create(document.querySelector('button'));
	l.start();
	l.stop();
	l.toggle();
	l.isLoading();
	l.setProgress(0-1);
</script>

Wrapping It Up

Ladda, with its compatibility with Bootstrap and responsive design, is a strong candidate for enhancing your projects. It performs flawlessly in modern browsers like Chrome, Firefox, Safari, as well as IE9 and onwards. We’re eager to hear your thoughts, so drop us a comment below.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail