In this topic,
We are going to see how to display the Progress bar
Step-1: Create Html Code in the index.html file.
<body>
<div class="popup-main-section">
<div class="container">
<div class="popup-box">
<h2>Success</h2>
<span>Your preferaence were updated. Please be patient as it can take up to 5 business days for these changes to go into effect.</span>
<div class="fill-main-div">
<div class="fill-inner-div">
</div>
</div>
</div>
</div>
</div>
</body>
Step-2: Add CSS Code in the <style>…</style> on the index.html file.
.popup-box {
display: inline-block;
background: #ddd;
padding: 15px;
width: 500px;
}
.fill-main-div{
height: 2px;
background: #000;
position: relative;
}
.fill-inner-div{
position: absolute;
height: 2px;
right: 0;
background: #ddd;
width: 0px;
transition: all 1s ease 0s;
animation: progres 4s forwards;
}
@keyframes progres{
0%{
width: 0%;
}
100%{
width: 100%;
}
};
In this blog, I have used keyframes for the progress bar.
I have set the border width from 0% to 100%.
Review the below video.
If you want the border to move left to right so add this CSS.
.fill-inner-div{
position: absolute;
height: 2px;
right: 0;
background: #ddd;
width: 0px;
transition: all 1s ease 0s;
animation: progres 4s forwards;
}
@keyframes progres{
0%{
width: 100%;
}
100%{
width: 0%;
}
};
I have set the border width from 100% to 0%.
Review the below video.
