Easy jQuery Loading Bar Generator - Nimble Loader

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:

• spin.js - Animated CSS3 Loading Spinner
• jQuery Plugin For Loading Animations - Waiting

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.