JSFiddle - React, Tailwind, and code Playground

by Kenneth Kin Lum

HTML

<main>
  <progress id="walking-progress"></progress>
</main>

CSS

main {
  font: 12px Consolas, Monaco, monospace;
  white-space: pre-wrap;
}

#walking-progress {
  width: 300px;
  height: 30px;
}

JavaScript

var deferred = $.Deferred(),
  promise = deferred.promise();

var totalSteps = 0,
  totalStepsToFinish = 50;

var timerID = setInterval(function() {

  var singleSteps = 1 + Math.floor(Math.random() * 10);

  totalSteps += singleSteps;

  deferred.notify({
    singleSteps: singleSteps,
    totalSteps: totalSteps
  });

  if (totalSteps >= totalStepsToFinish) {
    deferred.resolve(totalSteps);
    clearInterval(timerID);
  }

}, 1000);

promise.done(function(foo) {
  $("main").append("Person A: wow I just know that the promise was kept, with " + foo + " steps walked, at " + (new Date()).toLocaleTimeString() + "\n");
});

promise.fail(function() {
  $("main").append("Person A: wow I just know that the promise was not kept, at " + (new Date()).toLocaleTimeString() + "\n");
});

promise.progress(function(info) {
  $("#walking-progress").val(info.totalSteps / totalStepsToFinish);
});