How to show a vertical progress bar from bottom to top

Question

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>

Answer 1

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.

Answer 2

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>

Answer 3

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