how to create a progress bar with html and javascript
how to create a progress bar with html and javascript
So today in this tutorial we are going to create a responsive
progress bar with html and javascript and will add some css
to look more responsive. It will show a filling bar and percentage
inside the filling bar.
When we click on the download button the progress bar will
start to progress.
Here is the code
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.progressBar
{
width :340px;
height:25px;
border :1px solid #ddd ;
border-radius :10px;
}
.bar
{
width :0%;
height :25px;
background :#d32f2f ;
line-height:25px ;
text-align :center;
color :#fff;
border-radius :10px ;
}
.btn
{
width :100px;
height :40px;
border-radius :10px;
background :#ddd;
border :0;
outline :0;
}
.btn:active {
box-shadow :0 0 8px 8px rgba(0,0,0,0.2);
}
</style>
<title></title>
</head>
<body>
<div class="progressBar">
<div id="bar" class="bar">0%</div>
</div>
<br><br>
<button class="btn" onclick="progress()">Download</button>
<script type="text/javascript">
var percent =0;
var interval;
function progress(){
percent=0;
function animate(){
percent++;
document.getElementById("bar").style.width=percent+"%";
document.getElementById("bar").innerHTML =percent+"%";
if(percent==100||percent>100){
clearInterval(interval);
}
}
interval = setInterval(animate, 100);
}
</script>
</body>
</html>
Comments
Post a Comment