Prev Demo
Dynamice Progress Bar In The Clearinterval() Function In Javascript.
Next Demo
Write code here
J
|
B
|
A
<!DOCTYPE html> <html> <head> <title>Demo</title> </head> <body> <style> #myId{ border:8px solid #0e0208; height:5px; width:90%; position:relative; background-color:yellow; } #myDemo { background-color:blue; height:100%; position:absolute; width:15px; } </style> <h1>Dynmamic progress bar with setInterval() and clearInterval()</h1> <div id="myId"> <div id="myDemo"></div> </div> <br /> <br /> <br /> <input type="button" value="Start" onclick="myFunction()"/> <script> function myFunction() { var a = document.getElementById("myDemo"); var width = 0; var c = setInterval(Slide, 500); function Slide() { if (width == 150) { clearInterval(c); } else { width++; a.style.width = width + '%'; } } } </script> </body> </html>
Note: We DO NOT save your trial code in our database.
Output
