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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.