Progress Bar - Multi-Segment - Segment Progress

http://stackoverflow.com/questions/13623987/segmented-progressbar-jquery-ui

by Kamal Kumawat

HTML

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<!-- Options -->
<div>
  <!-- Maximum -->
  <label>Maximum ProgressBar Value</label>
  <input id="max" type="text" value="100" />
</div>
<div>
  <!-- Initial Value -->
  <label>Initial Value</label>
  <input id="val" type="text" value="43" />
</div>
<div>
  <!-- Width -->
  <label>ProgressBar Width</label>
  <input id="width" type="text" value="300" />
</div>
<div>
  <!-- Height -->
  <label>ProgressBar Height</label>
  <input id="height" type="text" value="30" />
</div>
<div>
  <!-- Multiply -->
  <label>Segmented ProgressBar</label>
  <input id="seg" type="text" value="70" />
</div>
<!-- Create ProgressBar by given options -->
<div>
  <input type="button" value="Create" />
</div>
<!-- ProgressBar Container -->
<div class="progressContainer"></div>
<!-- Action Buttons -->
<div>
  <input type="button" value="Start" />
  <input type="button" value="Stop" />
  <input type="button" value="Reset" />
</div>

CSS

div.progressContainer {
  clear:both;
  display:block;
}
.ui-progressbar-value{
  background: red
}

JavaScript

var i; // Define a global counter
var tmr; // Define timer

// Create Function

function inc() {
  // Define required values
  var max = parseInt($("input#max").val(), 10),
    seg = parseInt($("input#seg").val(), 10),
    val = parseInt($("input#val").val(), 10);
  // Get size for each progressbar
  var size = max / seg;
  // Get initial value
  var init = val;
  var next = val + 1;
  // If progress is at max then reset it
  if (init >= max) {
    init = 1;
    next = 1;
    for (i = 0; i < seg; i++) {
      $(".progress" + i).progressbar({ value: 0 });
    }
  }
  if (init < size) {
    // if smaller than size
    // than only 1 bar gonna get filled
    $(".progress0").progressbar({ value: init });
  } else if (init > size) {
    // else calgulate how many bars
    // gonna be effected
    var bars = Math.floor(init / size);
    for (i = 0; i < bars; i++) {
      init = Math.abs(init - size);
      $(".progress" + i).progressbar({ value: size });
    }
    // fill the value left to the last bar 
    // +1 here is just for making bar look fullfilled
    $(".progress" + i).progressbar({ value: init + 1 });
  }
  // Next value
  $("input#val").val(next);
  // Loop
  tmr = setTimeout(inc, 1000);
  // Now get the hell out of here!
}
// Start Function
function start() {
  // Set's interval to timer and starts
  tmr = setTimeout(inc, 1000);
  // Now get the hell out of here!
}
// Stop Function
function stop() {
  // Stops the timer
  clearTimeout(tmr);
  // Now get the hell out of here!
}
// Reset Function
function reset() {
  var seg = parseInt($("input#seg").val(), 10);
  // For segmented bars
  $("input#val").val(0);
  // Get initial value
  for (i = 0; i < seg; i++) { $(".progress" + i).progressbar({ value: 0 }); }
  // Now get the hell out of here!
}
// Validate Function
function validate(element) {
  var obj = $(element);
  if (!/[0-9]$/.test(obj.val())) {
    // Invalid
    obj.css('box-shadow', '0px 0px 8px #d81818');
    if (!obj.next().hasClass('error')) {
 ...