bload.js

A jQuery plugin for displaying loading animations

Options

• fadeInSpeed : The speed the loading screen fades in. (default 300)
• maskOpacity : Opacity of the mask. (default .4)
• imagePath : Path to the a difference loading image. (default false)
• imagePadding : Padding around the loading image. (default 16)
• imageDims : Width and Height of the image. (default {w:32,h:32})
• fullScreen : Enables full screen mode. Will center image in window. And overlay will be full screen as well. (default false)
• overlay
  • show : Show an overlay over the entire area to mask. (default false)
  • color : Color of the overlay. (default #000)
  • opacity : Opacity of the overlay (default .2)

Usage

$('elementToMask').bload(options, callback);

Example with no options

$('#elementToMask').bload( 	function(bload){ 	setTimeout(function(){ 		bload.hide(); // close animation 	},3000); });

Example based on clicking a button with some options changed

$('#button').click(function(e){ 	e.preventDefault(); 	$('#elementToMask').bload( 		{ 			fadeInSpeed		: 600, 			maskOpacity		: .6, 			overlay : { 				show		: true 			} 		}, 		function(bload){ 			setTimeout(function(){ 				bload.hide(); 			},3000);  		} 	); });