Simple jquery and CSS based Progressbar

Introduction

Progress bars are primarily used to indicate a visual representation of the stage approached in a long running task.

They are shown so as the user knows that a backend processing is till in action as well to indicate how much of that processing is completed.
Without this, user may assume that page is stuck and therefore might navigate away from it eventually.

Well before writing this post I searched a lot about javascript/jquery progressbars but in fact what exactly I needed, most of them lacked one thing or the other.

Only 
Animated Progress Bar in 4 lines of jQuery
was some what close to my particular requirement. I then decided to better roll over my sleeves and improve upon this progressbar, so that it allows me to do following:

• It should be wrapped in a javascript class allowing us to use dot notation and also tweak it by supplying different config options, right during instance initialization. Example, it allows us to set width and height of progressbar as well as set text color of percentage number.

• It should offer different flavors regarding look and feel. The CSS/style work is already done by the author of above link. But except the "default" skin, others were missing the percentage number during a periodical Progressbar update. So I have made some changes in the CSS files of these other skins to make this number visible.

• It should allow us to update progress on bar via a simple setValue() method.

Well eventually, I achieved my goal and here is what the Progressbar looks like, during a periodical update:

This is with the default skin. Snaps of Progressbar with other skins applied are also shown below:

 
Structure of source code is very easy. Simply download the sample Asp.Net project Zip. I have mentioned below details of its implementation.

The source files can be downloaded from GitHub. Click Image to download source files.

 Usage Steps

Here's how to use it in your project:

1. Download Zip file from the above GitHub link and extract it to a folder on your system.
2. To use in your own project, copy following files/folder to your project
   • progressbar.js
   • skins folder. (For theming progressbar. 5 different skins currently)
    
3. Next add reference of latest jquery.js file (version >= 1.4) file on your page where you want to display this progressbar. 
4. Add reference of progressbar.js file to your page's head section.
5. By default it assumes that the skin folder is present under "Styles" folder and therefore fetches corresponding .css file from that folder. (Dynamically upon calling of show() method). If skin folder is folder is present at some other relative path, then change it manually in progressbar.js file inside _loadSkinAndUI() method.
   
   
6. You can then create and display Progressbar using for example, the following statement:
   
   

   Progressbar.show({
         selector: '#progressbar',
         width: '400px',
         textColor: '#FFFFFF',
         skin: 'default'
   });

   Detail of config options:

         selector    // A must option. jquery selector within which to show the Progressbar.

         percent     // Some initial value. Default is 0

         width       // Width of Progressbar. Default is 400px
         height      // Height of Progressbar. Default is "auto"
         textColor   // Color of percentage number text. Default is "inherited".
         alignTextTo // Aligment of percentage number text.

                        Values can be left,center,right. Default is "right" 

         skin        // Skin applied to Progressbar. 

                        Options are big-green, default, jquery-ui-like, round-pink, tiny-green
         reloadSkin  // By default a skin's corresponding css file is loaded only once. 

                        If you want to change skin dynamically then set this option to true.

                        Default is false. 
         showReverseAnimationOnStart // If this is true then a reverse animation will be shown initially.

                        Default is false
         onCompleted // Event fired once the Progressbar reaches 100% 
   

   
   
   
7. On your intended intervals you can update the progressbar (for example) with following statement:



    Progressbar.setValue(10);

Here 10 is progressbar %age value set on a particular moment. Must be between 0 and 100.

Hope that helps and saves time like I did searching frantically over the web, not getting exactly what I needed. Forgive me however for my writing style/order... surely acknowledging I am not a good Blogger at all, as this being my first one. Hope with time this polishes up. Thanks.

Your comments/suggestions are greatly appreciated.

https://github.com/topgun743/Supersonic/archive/master.zip