Minimal jQuery Loading Animation Plugin - Bload

Bload is a simple lightweight jQuery plugin to create a loading mask with a custom animation on any Html element to indicate the loading status like Ajax requests.

Basic Usage:

1. Include the jQuery bload plugin after jQuery javascript library.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="bload/bload.js"></script>

2. Create an Html element you want to apply on a loading animation. Insert a link into it to trigger the loading animation.

<div id="bloadify"> <a href="#" id="bload">Bload</a> </div>

3. The javascirpt to trigger a loading mask covering the Html element by clicking the link you just created.

$('#bload').click(function(e){
e.preventDefault();
$('#bloadify').bload({
fadeInSpeed: 300, // The speed the loading screen fades in.
maskOpacity: .4, // Opacity of the mask. 
imagePath: false, // Path to the a difference loading image.
imagePadding: 16, // Padding around the loading image.
imageDims: {w:32,h:32}, // Width and Height of the image.
fullScreen: false, // Enables full screen mode. 
overlay : { 
show: false, // Show an overlay over the entire area to mask.
color: '#000', // Color of the overlay. 
opacity: .2 // Opacity of the overlay
}
}
},
function(bload){
setTimeout(function(){
bload.hide();
},3000);

});
});

Change log:

2015-11-06

• bug fixed.

---

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