There are various kinds of animation you can apply into your webpage. Animation for text, modal box, transition and the progress indicator. For progress indicators, usually in the form of bars, the progress you see on the bar indicates how much progress has been made (or loaded). If however you are interested of progress inside a button, try out Ladda.
Ladda is a jQuery plugin made by Hakim El Hattab to give you the loading effect inside a button. It’s a UI concept that effectively separates the gap between action and feedback. Users will be given a feedback in the form of a loading indicator instead of having to leave the page. There is also a version of Ladda for WordPress available.
Basic Usage
Ladda can be used as a standalone plugin which need no any other dependencies. To get started, firstly you have to include both the ladda.min.js and spin.min.js files you can get from GitHub page in your project, like so.
<script src="js/spin.min.js"></script> <script src="js/ladda.min.js"></script>
To make the button apply default Ladda themes, load the CSS file of ladda.min.css. If you want only the functional buttons without the theme, load the ladda-themeless.min.css file.
<link rel="stylesheet" href="dist/ladda.min.css">
HTML Markup
In order to make Ladda work, you have to include the ladda-button class into the button. Here is an example:
<button class="ladda-button" data-color="mint" data-style="expand-right" data-size="xl">Submit</button>
Ladda also provides you options within the HTML using data attributes for the button style. As you can see above, the button uses data-style for animation style. To apply a different style, you can check the full list in the demo page.
To change the color, you can use data-color. For button size, include data-size to the button.
Merging with the Server
And now, to make the loading animation submit to the server (which will reload the page after the animation) we will need the bind() method. This will bind progress buttons and simulate loading progress:
<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 are also able to control your buttons using Javascript API with the following approach:
<script> var l = Ladda.create( document.querySelector( 'button' ) ); l.start(); l.stop(); l.toggle(); l.isLoading(); l.setProgress( 0-1 ); </script>
Conclusion
With the support of Bootstrap and being responsive as well, Ladda is worth a try in your project. Moreover, it has been tested and it works well in the latest version of Chrome, Firefox, Safari as well as IE9 and above. Feel free to let us know what you think in the comment box below.
     |