Progress bar

Allows you to turn the block-level elements (usually div) in the performance indicators that show progress of any task performance.

Basic overview

ATTENTION! Web programmer has to associate himself the task performance with progress bar.

<div class="progressbar"

With label

<div class="progressbar label"
     data-progressbar-finish="Is done!" ></div>


User-defined functions interaction with 'progress bar':

<div id="progressbarLabelAction"
        class="progressbar label hide"
        data-progressbar-finish="Is done!" ></div>
<button class="startProgressbar btn success">Launch</button>
<button class="resetProgressbar btn warning">Reset</button>
    var $progressbar = $('#progressbarLabelAction');
    // Progress bar launch
    $(document).on("click", '.startProgressbar', function(event, ui) {
        setTimeout(progress, 2000);
    // Progress bar reset
    $(document).on("click", '.resetProgressbar', function(event, ui) {
      $progressbar.progressbar("value", 0);
    // Progress bar value update
    function progress() {
      var val = $progressbar.progressbar("value") || 0;
      $progressbar.progressbar("value", val + 2);
      if (val < 99) {
        setTimeout(progress, 100);

Share with your friends