BootstrapProgressbarManager

Easily create and manipulate Bootstrap progress bar.

Features

1. No need to write html for the progress bar
2. Easily update progress value
3. Easily style bootstrap progress bar
4. Easily create and manage stacked progress bar

Requirement

*Bootsrap 3+

Definition Of Terms

1. progress element: refers to the container element generated by the plugin with progress class
2. progress bar element: refers to the main progress element generated by the plugin with progress-bar class
3. Progress object: this is the handler returned by the plugin var ProgressHandler = $('#progress').progressbarManager()

Usage

Add the plugin

        <script src="bootstrap-progressbar-manager.min.js"></script>

Call the plugin on the container element you want the progress html to be appended to. This will not override existing elements or content of the container element

$(selector).progressbarManager( options );

Where

• Selector : Jquery selector for the container to append the progress bar html to
• options : Object literal to set the plugin options

HTML

JAVASCRIPT

 myProgress = $('#progress').progressbarManager({      
     totalValue : 50,
     initValue : 10 ,
  });

The above generates:

<div id="pbm-bootsrap-progress-1" class="progress">
    <div id="pbm-progress-bar-1" role="progress-bar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"     class="progress-bar progress-bar-primary" style="width: 20%; min-width: 2em;">20%</div>
</div>

and append it to the element with id progress.

The call to progressbarManager returns progress object which you can be used to modify the progress element on the fly.

To update the value of the progress for instance :

    myProgress.setValue(30 );

The plugin automatically converts values to percentage representation.

Note: *If you attempt to set a value higher than the value of the totalValue option, the progress bar percentage value will be set to 100% *.

The totalValue option can be a string that can be converted to number representation for instance if you are using it to monitor download or upload progress, you can use the bytes representation

 myDownloadProgress = $('#progress').progressbarManager({      
     totalValue : '40000kb',
     animate : true ,
     stripe : true
  });
  myDownloadProgress.setValue( '4000kb');

Create animated progress bar with stripe

 myProgress = $('#progress').progressbarManager({      
     totalValue : 50,
     initValue : 10 ,
     animate : true ,
     stripe : true
  });

Animated Progress Bar With Different Color

 myProgress = $('#progress').progressbarManager({      
     totalValue : 50,
     initValue : 10 ,
     animate : true ,
     stripe : true ,
     style : 'danger'
  });

Simulate download with setInterval()

 myDownloadProgress = $('#progress').progressbarManager({      
     totalValue : '20000kb',
     initValue : '0kb' ,
     animate : true ,
     stripe : true ,
     style : 'primary' ,
  });
  // lets simulate download
  var chunk = 0 ;
  var downloading = setInterval(function(){

       myDownloadProgress.setValue(chunk);

      if(myDownloadProgress.isComplete()){
          //change the style
          myDownloadProgress.style('success');
          // nothing to download again
          clearInterval(downloading);
      }
      chunk += 2000;
  }, 2000);

Custom Progressbar Text

 myDownloadProgress = $('#progress').progressbarManager({      
     totalValue : '20000kb',
     initValue : '0kb' ,
     animate : true ,
     stripe : true ,
     style : 'primary' ,
     showValueHandler : function(progressData){
        progressData.elem.text('Downloaded '+ progressData.currentValue+'%');
     }
  });

Some Options can be set after the plugin is initialized. See available option

myDownloadProgress.animate().stripe().setValue( '4000kb');

or remove the stripe

myDownloadProgress.removeStripe();

Stacked Progress Bar

Bootstrap progress bar supports stacked progress bar and you can use the plugin to create stacked progress bar. This can be archived by calling addBar() of the progress object.

Stacked Progress Bar Example

 myProgress = $('#progress').progressbarManager({      
     totalValue : 50,
     initValue : 50 ,
     // this is important
     total : 200
  });

You can add new progress bar to the progress element

 newProgressBarId = myProgress.addBar({      
     totalValue : 50,
     initValue : 40 ,
     style : 'danger'
  });
   newProgressBarId2 = myProgress.addBar({      
     totalValue : 50,
     initValue : 40 ,
     style : 'info'
  });

Updating Item Within The Stack

We will save name for each item in the custom data object, then use it to show the text for the progress

// add the initial
myStackedProgress = $('#example-6').progressbarManager({      
     totalValue : 50,
     initValue : 50 ,
     // this is important
     total : 200,
     debug : true ,
     data : {
         name : 'Stack One'
     },
     showValueHandler : function (progressbarData){
         progressbarData.elem.text(progressbarData.data.name)
     }
  });

Add new items

  newProgressBarId2 = myStackedProgress.addBar({      
     totalValue : 30,
     initValue : 20 ,
     style : 'danger',
     data : {
         name : 'Stack Two'
     }
  });
  newProgressBarId3 = myStackedProgress.addBar({      
     totalValue : 30,
     initValue : 20 ,
     style : 'info' ,
     data : {
         name : 'Stack Three'
     }
  });

Then update the second bar

    myStackedProgress.style('success' , newProgressBarId2).animate(newProgressBarId2).setValue( 50 ,newProgressBarId2)

Note:

• Just like each item in the stack can have custom data, you can set the showValueHandler option for each item to show the text differently
• Each item can not have value greater than its totalValue option, if you attempt to setValue() greater than the total, the value will be changed to the totalValue. The plugin will also log a message to notify you if debug option is set to true
  

Check the plugin options to learn more.

Plugin Options

Progress Object Public Methods

Progress Bar meta

• totalValue (int) : Total value option
  
• currentValue (int) : current value for the bar. This figure is relative to the total value
• init (int) : Holds the initial value It is never changed
  
• initPercent (int) : Initial percentage. Percentage values are auto calculated Please Don't change in callbacks
  
• totalValuePercent (int) : Total percentage value. Don't change in callbacks
• totalValuePercentRounded (int) : Same as totalValuePercent but Rounded
• currentPercent (int) : Current percentage
• currentPercentRounded (int) : Same as currentPercent but rounded
• style (string) : Contextual bootstrap style prefix
• elem (object) : Jquery element The Progress bar element. The element with 'progress-bar' class
• showText (boolean) : Keep track of showValue()/hideValue() settings Whether to show value the current progress bar value/percent
• id (string) : id of the progress bar eleme. This can be used to reference specific progress bar when using stacked progress bar
• data (object) : Custom data for the progress bar
• showValueHandler (function) : Function that shows the current value/percentage of the progress bar
• hideValueHandler (function) : function that hides the current value/percentage of the progress bar