jQuery Animated Button's Icon On Loading - Loda Button

Loda Button is a jQuery plugin that uses CSS3 animation, transitions and transforms to animate your button's icon as the data are being fetched from the server.

Basic Usage:

1. Include icomon css file for font icon

<link rel="stylesheet" href="icomon/style.css" />

2. Include required jQuery Loda Button CSS on the page

<link rel="stylesheet" href="../loda-button.css" />

3. Create a lock button

<a href="#" class="loda-btn"> <span aria-hidden="true" class="loda-icon icon-lock"></span> Lock </a>

4. Include jQuery library and jQuery Loda Button on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="../loda-button.js"></script> 

5. The javascript

<script type="text/javascript">

$('.loda-btn')
.lodaButton()

.click(function(e) {

e.preventDefault();

var _self = $(this);
_self.lodaButton('start'); // activate the button and start the icon animation

setTimeout(function() {
_self.lodaButton('stop'); // stop the animation:
}, 2000);

});

</script>

---

This awesome jQuery plugin is developed by lugolabs. For more Advanced Usages, please check the demo page or visit the official website.