Dima Vleskov Dima Vleskov - 2 months ago 13
Javascript Question

how to make progress Bar with numbers

i have a progress bar which has to finish at 100%, and this moment the number shows this progress, the problem is this number is 1.5(it has to show 0.1, 0,2 and so on till number - 1.5) and I don't know how bind the progress bar with this number

$(function() {
var x = document.getElementById("load");
var width = 0;
x.innerHTML = width;
var int = setInterval(move, 20);
function move() {
if (width == 100) {
clearInterval(int);
} else {
width += 1;
x.style.width = width + "%";
x.innerHTML = width + "%";
}
}
});

Answer

This is more a math problem than a scripting one...

You have to tell the script that 1.5 is 100%.

I only added one line to your script in order to change the inner HTML displayed.

var showNumber = (1.5/100)*width;
x.innerHTML = showNumber.toFixed(1);

$(function() {
  var x = document.getElementById("load");
  var width = 0;
  x.innerHTML = width;
  var int = setInterval(move, 200); // Setted a longer delay...
  function move() {
    if (width == 100) {
      clearInterval(int);
    } else {
      width += 1;
      x.style.width = width + "%";
      var showNumber = (1.5/100)*width;
      x.innerHTML = showNumber.toFixed(1);    // Only one decimal.
    }
  }
});
#load{
  background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="load"></div>

Comments