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

This is simple progress bar. More complex progress bars can be made using javascript.

Thanks
Feel free for any query.

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.