in this tutorial, I will show you how to make a beautiful progress bar using HTML, CSS and JavaScript. it's an easy and very simple tutorial, you can get the source code from the link at the bottom of the article so enjoy it.
HTML Code
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="main.css">
<title>Progress bar</title>
</head>
<body>
<div class="container">
<h1>progress bar</h1>
<div class="progress">
<p class="counter">0%</p>
<div class="bar"></div>
</div>
<p class="succes"></p>
<button onclick="progress()">Start Downloading</button>
</div>
<script src="progress.js" type="text/javascript"></script>
</body>
</html>
CSS Code
@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');
*{
margin: 0;
padding: 0;
outline: 0;
}
body{
background-color: #e8eaf6;
}
.container{
width: 500px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
padding: 20px;
background-color: #fff;
box-shadow: 0 6px 8px rgba(0,0,0,.1);
transition: .4s;
}
.container h1{
text-align: center;
margin-bottom: 25px;
text-transform: uppercase;
font-family: 'nunito',sans-serif;
}
.container .progress{
width: 100%;
background-color: #e2e2e2;
position: relative;
margin-bottom: 25px;
border-radius: 30px;
height: 25px;
}
.container .progress .bar{
position: absolute;
width: 0%;
height: 100%;
z-index: 0;
background-color: #304ffe;
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 30px;
}
.container .progress p{
position: absolute;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
color: #fafafa;
font-family: 'nunito',sans-serif;
z-index: 1;
}
.succes{
text-align: center;
margin-bottom: 25px;
transition: .4s;
font-family: 'nunito',sans-serif;
color: #536dfe;
}
.container button{
position: relative;
left: 50%;
transform: translateX(-50%);
padding: 10px 5px;
width: 50%;
background-color: #304ffe;
border: none;
border-radius: 60px;
color: #fafafa;
font-family: 'nunito';
text-transform: uppercase;
}
JavaScript Code
var bar = document.querySelector('.bar');
var counter = document.querySelector('.counter');
var succes = document.querySelector('.succes');
var width = 1;
function progress(){
setInterval(function(){
if(width>=100){
succes.innerHTML = "Download succes";
clearInterval(download);
}else{
width++;
bar.style.width = width + "%";
counter.innerHTML = width+'%';
}
},20);
}
you can download the project file from this link : Download
Make a Progress Bar using JavaScript
Reviewed by Medics
on
August 02, 2019
Rating:
Reviewed by Medics
on
August 02, 2019
Rating:
No comments: