<div class="progress">
<div class="color"></div>
</div>
body{
position: absolute;
top: 50%;
left: 45%;
transform: translate(-50%,-50%);
background-color: #2a9d8f;
}
.progress{
position: relative;
height: 10px;
width: 1110%;
border: 10px solid #f4a261;
border-radius: 15px;
}
.progress .color{
position: absolute;
background-color: #ffffff;
width: 0px;
height: 10px;
border-radius: 15px;
animation: progres 4s infinite linear;
}
@keyframes progres{
0%{
width: 0%;
}
25%{
width: 50%;
}
50%{
width: 75%;
}
75%{
width: 85%;
}
100%{
width: 100%;
}
};
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.