.progress-bar {
position: relative;
}
.progress-status {
position: absolute;
top: 0;
animation: progress 5s infinite;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
@keyframes progress {
0% {
width: 0%;
background-color: var(--start);
}
50% {
width: 50%;
background-color: var(--middle);
}
100% {
width: 100%;
background-color: var(--finish);
}
}
html,
body {
margin: 0;
padding: 0;
}
:root {
--progressbar-bg: lightgrey;
--start: red;
--middle: blue;
--finish: green;
}
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 0 50px;
}
.progress-bar,
.progress-status {
height: 30px;
background: var(--progressbar-bg);
border-radius: 50px;
width: 100%;
}