Easy jQuery Loading Bar Generator - Nimble Loader
File Size: | 47.6KB |
---|---|
Views Total: | 2781 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Nimble Loader is a jQuery based loading bar generator that helps you quickly and simply create loading effects with animated loading spinner for your projects like ajax content loading, content fetching/refreshing, time counting etc.
You might also like:
Basic Usage:
1. Include jQuery library and jQuery Nimble Loader Plugin as a script on your web page
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="jquery.nimble.loader.js"></script>
2. Include jQuery Nimble Loader CSS
<link rel="stylesheet" href="style/loader.css" media="screen" type="text/css" />
3. Markup
<div id="loader1" class="container-loader"> <div id="loading1" class="nimble-loader"> <p>.... </p> </div> <button class="show-loader">Show loading (<span id="nb-call">0</span>)</button> <button class="hide-loader">Hide loading</button> <div class="clearline"></div> </div>
4. The javascript
$(document).ready(function(){ /********************************************************************************************************************* * INITIALISATION * Define some sets of params * Init the global param for the plugin ********************************************************************************************************************/ // Params example 1 var params = { loaderClass : "loading_bar_1", debug : true, speed : 'fast', hasBackground : false, zIndex : 99 }; // Overwriting default params : nimbleLoader will use param1 as default options $.fn.nimbleLoader.setSettings(params); /********************************************************************************************************************* * EXAMPLE 1 : SIMPLE EXAMPLE * Activate loading bar with "show" button * Deactivate by "hide" button ********************************************************************************************************************/ var changeNbCall = function(action){ var $nbCall = $("#nb-call"); var nbCall = parseInt($nbCall.html()); if(!isNaN(nbCall)){ if(action === "up"){nbCall += 1;} else if(action === "down"){ if(nbCall > 0){nbCall -= 1;} } }else{nbCall = 0;} $nbCall.html(nbCall); }; // Init button of loader $("#loader1 .show-loader").click(function(){ changeNbCall("up"); $("#loading1").nimbleLoader("show",{ hasBackground: true, backgroundColor: "#ffffff", backgroundOpacity: "0.7" }); // No param is specified, it will use default one (param1) }); $("#loader1 .hide-loader").click(function(){ changeNbCall("down"); $("#loading1").nimbleLoader("hide"); }); });
This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.