Making a progress bar in easy steps

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 …

animation box build class create css easy giving html making padding progress web3 webdev will you