SOBR#177220

by mrlew

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="progress">
  <div id="progressBar" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
    0%
  </div>
</div>

JavaScript

var progressBar = document.getElementById('progressBar');

function onProgress(e) {

if (e.lengthComputable) {
	 /* calcula o percentual baseado no e.loaded e e.total
   - multiplica por 100 por que queremos em forma de percentual para setar o width e o texto)
   - usa o Math.floor para pegar somente a parte inteira */
    var value = Math.floor((e.loaded / e.total) * 100);
    progressBar.style.width = value + "%";
    progressBar.innerText = value + "%";
  }
  
}

var simulateProgress = function() {

  var total = 500;
  var partial = 0;
  var chunk = 10;

  function triggerOnProgress() {
    onProgress({
      lengthComputable: true,
      total: total,
      loaded: partial
    });
    partial += chunk;
    if (partial <= total) setTimeout(triggerOnProgress, 500);
  }
  
	triggerOnProgress();
  

}();