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


<!-- data-progressbar-start - before running progress -->
<div class="progressbar label"
     data-progressbar-value="0"
     data-progressbar-start="Launch!"
     data-progressbar-finish="Is done!"></div>
 
<!-- data-progressbar-finish - when progress is done -->    
<div class="progressbar label"
     data-progressbar-value="100"
     data-progressbar-start="Launch!"
     data-progressbar-finish="Is done!"></div>

Example

User-defined functions interaction with 'progress bar':

<div id="progressbarLabelAction"
        class="progressbar hide mb5px"
        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>

Progress bar settings


Color alternatives

The progress bar can easily be made more expressive for the particular context as well as the other components by adding one of the classes.

<div class="progressbar"></div>
<div class="progressbar success"></div>
<div class="progressbar warning"></div>
<div class="progressbar error"></div>
<div class="progressbar info"></div>

Size

<div class="progressbar larger"></div>
<div class="progressbar large"></div>
<div class="progressbar"></div>
<div class="progressbar small"></div>