Simple and Customizable jQuery Loading Animation Plugin

A jQuery based customizable Loading Effect plugin which allows you to create your own loading effect with custom animations and algorithms. It come with 3 predefined algorithms (linear, random, snake) and 3 effects (fancy, jump, simple).

Basic Usage:

1. Include jQuery library and jQuery loading plugin on your page

<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="core.js" type="text/javascript"></script>

2. Include config.js on your page. All configurations can be edited via config.js

(function($) {
$.fn.loading.defaults = {
opacity:0.9,
speedIn:300,
speedOut:   1000,

progress: 0,

algorithm: 'snake',
effect:['simple'],

spinner: {
width:   35,
height:  35,
matrix: {
x: null,
y: null
},
pin: {
width:  7,
height: 7,
margin: {
top:1,
right:  1,
bottom: 0,
left:   0
}
},
interval: 100
},

background: {
color:'white',
opacity:  0.8,
position: '',
img:  null,
borderRadius: 1
}
};
})(jQuery);

3. Include necessary algorithm and effect js files after jQuery

<script src="../src/algorithm/snake.js" type="text/javascript"></script>
<script src="../src/effect/simple.js" type="text/javascript"></script>

4. Markup html structure

<div id="test">Load</div>
<button type="button" id="click"></button>

5. Call the plugin

<script type="text/javascript">
$('#click').click(function(){
$('#test').loading();
});
</script>

Change Log:

v0.2.5 (2013-06-13)

• Added runtime functionality. Style refactoring.

v0.2.3 (2013-04-03)

• Performance Improvement

---

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