Here i will be giving you easy steps to build a progress bar using HTML and CSS only. We will be using @keyframes for CSS animation.
Step 1: HTML
Create a div and another nested div
<div class=”outer-box”>
<div class=”inner-box”>80%</div>
</div>
<div class=”inner-box”>80%</div>
</div>
Step 2: CSS
Give width to outer-box and inner-box with some padding in CSS. Here i have given padding of 10px. Now add animation with name “progressbar” and make the animation liner. Give animation duration as you like, here i have given it of 5 second. Now using “@keyframes” give you animation from and to. You can also replace from and to with 0% and 100% as you like.
.outer-box{
width:300px;
padding:10px;
background-color: blueviolet;
border-radius:10px;
}
.inner-box{
text-align: center;
max-width: 280px;
padding: 10px;
background-color: #61cf71;
animation: progressbar linear forwards;
animation-duration: 5s;
border-radius: 10px;
color: white;
font-family: cursive;
}
@keyframes progressbar {
from{width:1%}
to{width:80%;}
}
width:300px;
padding:10px;
background-color: blueviolet;
border-radius:10px;
}
.inner-box{
text-align: center;
max-width: 280px;
padding: 10px;
background-color: #61cf71;
animation: progressbar linear forwards;
animation-duration: 5s;
border-radius: 10px;
color: white;
font-family: cursive;
}
@keyframes progressbar {
from{width:1%}
to{width:80%;}
}
This is simple progress bar. More complex progress bars can be made using javascript.
Thanks
Feel free for any query.
Please follow and like us:
