progressBar (HTML DOM Window)

<!DOCTYPE html>
<html>
<head>
<title>Js Code Testing</title>
<style>
#progressBar{
width: 100%;
height: 30px;
position: relative;
background-color: grey;
}

#myBar{
width: 20px;
height: 30px;
position: absolute;
background-color: green; 
}
</style>
</head>
<body>
<div id = "progressBar">
  <div id = "myBar"></div>
</div><p></p>
<button onclick = "myMove()">Try Now</button>
<script>
function myMove(){
var ele = document.getElementById("myBar");
var width = 0;
var myTime = setInterval(jsFun, 100);
function jsFun(){
if(width == 100){
clearInterval(myTime);
}else{
width ++;
ele.style.width = width + '%';
}
}
}
</script>
</body>
</html>

Comments:

No comment to show.