1<!DOCTYPE html>
2<html>
3<style>
4#myProgress {
5 width: 100%;
6 background-color: #ddd;
7}
8
9#myBar {
10 width: 1%;
11 height: 30px;
12 background-color: #4CAF50;
13}
14</style>
15<body>
16
17<h1>JavaScript Progress Bar</h1>
18
19<div id="myProgress">
20 <div id="myBar"></div>
21</div>
22
23<br>
24<button onclick="move()">Click Me</button>
25
26<script>
27var i = 0;
28function move() {
29 if (i == 0) {
30 i = 1;
31 var elem = document.getElementById("myBar");
32 var width = 1;
33 var id = setInterval(frame, 10);
34 function frame() {
35 if (width >= 100) {
36 clearInterval(id);
37 i = 0;
38 } else {
39 width++;
40 elem.style.width = width + "%";
41 }
42 }
43 }
44}
45</script>
46
47</body>
48</html>
49