Create a Dynamic Animated Progress Bar JavaScript
Welcome, How to Create a Dynamic Animated Progress Bar Using JavaScript in Hindi. Create a Dynamic Animated Progress Bar with Percentage Using JavaScript in Hindi.
Definition and Usage
The clearInterval() method clears a timer set with the setInterval() method.
The ID value returned by setInterval() is used as the parameter for the clearInterval() method.
Definition and Usage
The clearInterval() method clears a timer set with the setInterval() method.
The ID value returned by setInterval() is used as the parameter for the clearInterval() method.
SOURCE CODE COPY HERE
<!-- Create a Dynamic Animated Progress Bar Using JavaScript: -->
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Maven+Pro&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
*{
font-family: 'Maven Pro', sans-serif;
}
#myprogress{
width: 80%;
background: grey;
margin: auto;
}
#mybar{
width: 1%;
background: green;
color: white;
text-align: center;
}
</style>
<body>
<h1 style="text-align: center;"><i class="fa fa-music" aria-hidden="true"></i> Dynamic Animated Progress Bar <i class="fa fa-music" aria-hidden="true"></i> </h1>
<h1 style="text-align: center;"> DONATION FOR SUPPORT: PhonePay = vinodbahadur@ybl GooglePay: vbthapa55@oksbi
Believe me all this money will be used to make more quality videos and to make my channel grow.
So that I can always provide you awesome free videos :) </h1>
<div id="myprogress">
<div id="mybar">
<span id="incvalue">1%</span>
</div>
</div>
<br> <button onclick="move()">ClickMe</button>
<script>
const move = () => {
var elem = document.getElementById("mybar");
var width = 1;
var id = setInterval(frame, 10)
function frame(){
if(width >= 100){
clearInterval(id);
}else{
width++;
elem.style.width = width + "%";
document.getElementById("incvalue").innerHTML = width + "%";
}
}
}
</script>
</body>
</html>
