The jquery.nimble.loader plugin will allow you to easy create loading bar for any element in your web page.
1- Define the css style for your loading bar
.loading_bar{
position: absolute;
display: none;
height: 100%;
width: 100%;
background: transparent url(../images/ajax-loader.gif) no-repeat 50% 50%;
}
2- Parameters the plugins :
var myLoadingParams = {
loaderClass : "loading_bar",
hasBackground : true
}
$.fn.nimbleLoader.setSettings(myLoadingParams);
Here loaderClass option is not needed as they reuse default values,hasBackground will add a background to the loading bar
3- To show the loading bar :
$("#myElement").nimbleLoader("show");
4- To hide the loading bar :
$("#myElement").nimbleLoader("hide");
That's all !
It's also easy to define different styles for several loading bar.
Example, if you want to show a specific loading bar with a blue background for your body :
var myBodyLoadingParams = {
loaderClass : "loading_bar_body",
speed : 700,
needRelativeParent : false,
hasBackground : true,
backgroundColor : blue,
backgroundOpacity : 0.75
}
$("body").nimbleLoader("show", myBodyLoadingParams);
See examples on the web page demo
- Copy jquery.nimble.loader.js in your working directory
- Add the script tag to reference it into your website
You will find more information on "how does it work" into the jquery.nimble.loader.js file
This plugin was originaly written by Christophe Laborier and published by Nimble Apps Limited. www.salesclic.com
At the time of the publication, the core features of the plugin are fully functional. Yet, Nimble Apps does not consider it as complete.
We are sure that many enhancements can be made to the plugin and hope you will contribute to it.