Basic overview
ATTENTION! Web programmer has to associate himself the task performance with progress bar.
<div class="progressbar" data-progressbar-value="43"></div>
Allows you to turn the block-level elements (usually div
) in the performance indicators that show progress of any task performance.
ATTENTION! Web programmer has to associate himself the task performance with progress bar.
<div class="progressbar" data-progressbar-value="43"></div>
<div class="progressbar label" data-progressbar-start="Launch!" data-progressbar-finish="Is done!" ></div>
<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>