Making a progress bar in easy steps

#css #html #web3 #webdev

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>

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%;}
}