Welcome aboard! We are happy you are here and wish you good net-raft!
<!DOCTYPE html>
<html>
<head>
<style>
#myProgress
{
width: 50%;
background-color: grey;
border: 2px solid black;
border-radius: 10px;
}
#Prog_Bar
{
width: 30%;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="myProgress">
<div id="Prog_Bar">30%</div>
</div>
<br>
<button onclick="move_bar()">Click Me</button>
<script>
function move_bar() {
var element = document.getElementById("Prog_Bar");
var width = 30;
var id = setInterval(frame, 30);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
element.style.width = width + '%';
element.innerHTML = width * 1 + '%';
}
}
}
</script>
</body>
</html>
The most helpful JAVASCRIPT solutions
How can I get the last day and the next day in javascript ?JAVASCRIPT Click to see more ... 5.8K 507