CODEWITHSUNDEEP
javascripthtmlcss
Ilkin Ismayilli
Ilkin Ismayilli

Reputation: 37

How to show a vertical progress bar from bottom to top

I need help How can i make a progress bar when the window.onload, it has to fill from bottom to top, in this code it works reverse

function move() {
  var elem = document.getElementById("myBar");   
  var height = 0;
  var id = setInterval(frame, 100);
  function frame() {
    if (height >= 70) {
      clearInterval(id);
    } else {
      height++; 
      elem.style.height = height + '%'; 
      elem.innerHTML = height * 1  + '%';
    }
  }
}
window.onload = move();
#myProgress {
  width:100px;
  background-color: red;
  height:100px
}

#myBar {
  width: 100px;
  background-color: #4CAF50;
  text-align: center;
  color: white;
}
<div id="myProgress">
  <div id="myBar">0</div>
</div>

Upvotes: 4

Views: 1905

Answers (3)

Jithin Raj P R
Jithin Raj P R

Reputation: 6797

A simple CSS way would be as following.

function move() {
  var elem = document.getElementById("myBar");   
  var height = 0;
  var id = setInterval(frame, 100);
  function frame() {
    if (height >= 70) {
      clearInterval(id);
    } else {
      height++; 
      elem.style.height = height + '%'; 
      elem.innerHTML = height * 1  + '%';
    }
  }
}
window.onload = move();
#myProgress {
  width:100px;
  background-color: red;
  height:100px;
  position:relative;
}

#myBar {
  width: 100px;
  height: 0px;
  background-color: #4CAF50;
  text-align: center;
  color: white;
  position:absolute;
  bottom:0px;
}
<div id="myProgress">
  <div id="myBar">0</div>
</div>

I hope this was helpful for you. If you want the number to be shown always please do ask. But in my view this would be better.

Upvotes: 2

kyzo98
kyzo98

Reputation: 1

Swap background colors and add 100 height to the frontal DIV. Then the JS code swap the sum by minus.

Upvotes: 0

Sankar
Sankar

Reputation: 7107

Is this you are expecting?

Make the myBar height to 100%, then decrease the same by percentage.

function move() {
  var elem = document.getElementById("myBar");   
  var height = 0;
  var id = setInterval(frame, 100);
  function frame() {
    if (height >= 70) {
      clearInterval(id);
    } else {
      height++; 
      elem.style.height = (100 - height) + '%'; 
      elem.innerHTML = height * 1  + '%';
    }
  }
}
window.onload = move();
#myProgress {
  width:100px;
  background-color: red;
  height:100px
}

#myBar {
  width: 100px;
  background-color: #4CAF50;
  text-align: center;
  color: white;
  height:100%;
}
<div id="myProgress">
  <div id="myBar">0</div>
</div>

Upvotes: 1

Related Questions