Minimal jQuery Loading Animation Plugin - Bload
File Size: | 12 KB |
---|---|
Views Total: | 4886 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.