Français
English 
We are happy to announce the publication of our first JQuery plugin: the nimbleLoader.
This simple tool will allow you to create loading bars for any element on your web page with ease.
Are you worried about your users waiting for a page to load without the corresponding loading effect? Or do you want to let your users know something is happening on the page facing them, during AJAX requests for example?
Then this plugin is made for you!
You can dowload it on the JQuery website.
Go to the demo page to see simple use cases.
Short overview
Once the plugin is installed on your website, only three steps are necessary to use the nimbleLoader.
1- Define the CSS style for your loading bar
// loading_bar is the default class using by the plugin
.loading_bar{
position: absolute;
display: none;
height: 100%;
width: 100%;
z-index: 99;
background: transparent url(../images/ajax-loader.gif) no-repeat 50% 50%;
}
Once this is done, you can call your loading bar on any element on your page. For example, assuming there is an element with id=’myElement’, here are steps two and three:
2- Show the loading bar
$("#myElement").nimbleLoader("show");
3- Hide it when loading is completed
$("#myElement").nimbleLoader("hide");
Note that you can configure the plugin in many ways: see the plugin for more information.
And… that’s all you are done, we hope you will enjoy it !
Don’t hesitate to give us feedback and ideas for improvement. Thanks in advance!
Any chance that you could clarify further? This seems simple to implement; follow steps 1, 2, 3… I checked the demo and tried deciphering with Firebug. Still not clear on how to set the parameters (proper syntax) and where these parameters get set (in the jquery.nimble.loader.js? or somewhere else like in the document.ready function on my page). Seems like the .loading_bar class handles the animated gif image and the css positioning of that div so good there, but just need a further explanation of where and how to set the parameter and target the id for the element that’s loaded. Also where would these hide and show jQuery statements need to be placed?
I’m trying to implement this loader on an image gallery with some 30 images. I’ll try again tomorrow with a new perspective. Thanks.
Commentaire par Araphoe Rappaport — 25 mai 2011 @ 8 h 38 minI am not sure I understand the way your images are loaded. I see two possibilities:
1- Your images are defined in your HTML code
2- They are loaded via AJAX
In the first case, the plugin will not help you: the nimbleLoader was not made to load a resource (image, file…) by itself. So the right thing to do would be to perform the loading with AJAX (case 2) and use the Loader on the element that contains the image.
Regarding the settings of the parameters, you should take a look at the beginning of the demo.js file.
Before giving you more help, can you describe a little bit more the way you try to use the nimbleLoader plugin? Maybe you can give the URL of your gallery?
Commentaire par Christophe (nimble apps) — 25 mai 2011 @ 11 h 08 min