animated progress bar

———- Index.html ———-

<!DOCTYPE html>
<html>
<head>
<title>Animated Progress Bar</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<div id=”percentcount” class=”percent-count”>
</div>
<div class=”progress-bar”>
<div class=”progress” id=”progress”>

</div>
</div>
</body>
<script type=”text/javascript” src=”script.js”></script>
</html>

———- style.css ———-

*{
box-sizing: border-box;
}

body{
margin: 0;
padding: 0;
background: black;
}

.percent-count{
width: 450px;
height: 50px;
margin: 100px auto;
font-size: 50px;
text-align: center;
color: white;
}

.percent-bar{
width: 506px;
height: 26px;
background-color: #bbb;
border-radius: 13px;
padding: 3px;
margin: 50px auto;
}

.progress{
width: 500px;
height: 20px;
border-radius: 10px;
background-color: blue;
}

———— script.js —————–

function progress(){
var prg = document.getElementById(‘progress’);
var percent = document.getElementById(‘percentCount’);
var counter = 5;
var progress = 25;
var id = setInterval(frame,50);

function frame(){
if(progress == 500 && counter == 100){
clearInterval(id);
} else {
progress += 5;
counter += 1;
prg.style.width = progress + ‘px’;
percent.innerHTML = counter + ‘%’;
}
}
}

Leave a Reply

Your email address will not be published. Required fields are marked *