javascript progress bar with console.log

Question

I'm trying to realize a simple real time progress bar in javascript.

During a function running, i'm saving logs like this:

console.log(message);

and it returns me:

 Object { status="working phase 1",  progress=0.014}
 Object { status="working phase 1",  progress=0.015}
 Object { status="working phase 2",  progress=4.5}
 Object { status="working phase 1",  progress=0.016}

and so on until it reaches 1.0 (100%) (phase 1 only!) . Is there a way to capture the progress value (number) of status = phase 1 ONLY and use it to build a progress bar? if yes, how? Thanks in advance

Answer 1

function progress(phase, percentage) {
  var elem = document.getElementById(phase);
  var width = Math.floor(percentage * 100);
  if (width <= 100) {
    elem.style.width = width + '%';
    document.getElementById(phase + " label").innerHTML = width * 1 + '%';
  }
}



progress('phase 1', 0.01);
progress('phase 2', 0.10);
progress('phase 2', 0.20);
progress('phase 1', 0.05);
progress('phase 2', 0.30);
progress('phase 1', 0.55);

/* If you want the label inside the progress bar */

.label {
  text-align: center;
  /* If you want to center it */
  line-height: 30px;
  /* Set the line-height to the same as the height of the progress bar container, to center it vertically */
  color: white;
}
.progress {
  position: relative;
  width: 100%;
  height: 30px;
  background-color: #ddd;
  margin-top: 5px;
  margin-bottom: 5px;
}
.bar {
  position: absolute;
  width: 10%;
  height: 100%;
  background-color: #4CAF50;
}

<div class="progress">
  <div class='bar' id="phase 1">
    <div class="label" id="phase 1 label">10%</div>
  </div>
</div>
<div class='progress'>
  <div class='bar' id="phase 2">
    <div class="label" id="phase 2 label">10%</div>
  </div>
</div>