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>