Skip to content

Latest commit

 

History

History
54 lines (46 loc) · 1.25 KB

README.md

File metadata and controls

54 lines (46 loc) · 1.25 KB

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);

		}
	);
});