Javascript progressbar with Time and Callback On Finish

Question

I am trying to get a progressbar that will run for specified seconds and after time finished it will show a msg. so far I have below code which show progressbar Only with no time or callback function

var i = 0;
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
  if (width >= 100) {
    clearInterval(id);
    i = 0;
  } else {
    width++;
    elem.style.width = width + "%";
  }
}
}

How to pass time and a callback on progressbar finish in above code

Answer 1

here is a sample I made for uploading the file progress bar HTML

<form id="form" name="form" action="/uploader" enctype="multipart/form-data" 
method="post">
   <div class="buttons">
      <div class="upload-button">
       <div class="label">Click me!</div>
     <input id="files" name="files" type="file" size="1" multiple 
     onchange="uploadFiles('files');" />
    </div>
  </div>
</form>
<div id="progress" class="progress"><div id="bar" class="bar"></div><div id="label" 
class="label">0%</div></div>

js fire ajax request that returns value to update it in the progress bar in html

function uploadFiles(inputId) {
var input = document.getElementById(inputId);
var files = input.files;
var formData = new FormData();

for (var i = 0; i != files.length; i++) {
   formData.append("files", files[i]);
}

startUpdatingProgressIndicator();
  $.ajax(
    {
      url: "/uploader",
      data: formData,
      processData: false,
      contentType: false,
      type: "POST",
      success: function (data) {
      stopUpdatingProgressIndicator();
      alert("Files Uploaded!");
    }
   }
 );
}

var intervalId;

function startUpdatingProgressIndicator() {
$("#progress").show();

 intervalId = setInterval(
 function () {
  // We use the POST requests here to avoid caching problems (we could use the GET 
  requests and disable the cache instead)
     $.post(
        "/uploader/progress",
         function (progress) {
         $("#bar").css({ width: progress + "%" });
         $("#label").html(progress + "%");
         }
        );
       },
      10
     );
    }

 function stopUpdatingProgressIndicator() {
   clearInterval(intervalId);
 }

css

.upload-button {
  background: #f0f0f0;
  border-radius: 100px;
  text-align: center;
  position: relative;
  width: 200px;
  height: 200px;
 }

 .upload-button .label {
  line-height: 200px;
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
 }

 .upload-button input {
  opacity: 0;
  cursor: pointer;
  font-size: 200px;
  width: 200px;
  height: 200px;
 }

.progress {
  background: #f0f0f0;
  margin-top: 30px;
  display: none;
  position: relative;
 }

.progress .bar {
  background: green;
  width: 33%;
  height: 30px;
 }

 .progress .label {
  line-height: 30px;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 30px;
 }