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"
     data-progressbar-value="43"></div>

With label


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

Example

User-defined functions interaction with 'progress bar':

<div id="progressbarLabelAction"
        class="progressbar label hide"
        data-progressbar-start="Launch!"
        data-progressbar-finish="Is done!" ></div>
        
<button class="startProgressbar btn success">Launch</button>
<button class="resetProgressbar btn warning">Reset</button>
        
<script>
    var $progressbar = $('#progressbarLabelAction');
    
    // Progress bar launch
    $(document).on("click", '.startProgressbar', function(event, ui) {
        $progressbar.show();
        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);
      }
    }
</script>


Share with your friends