Minimal jQuery Loading Animation Plugin - Bload

File Size: 12 KB
Views Total: 4909
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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=""></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.

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


Change log:


  • bug fixed.

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