Progress Bar CSS

by Shoaib Chikate

HTML

<div class="progress-bar-title">Hello</div>
<div class="progress-bar">  </div>

CSS

.progress-bar {
    position: relative;
    margin: auto;
    top: 0; bottom: 0; left: 0; right: 0;
    width: 300px;
    height: 30px;
    overflow: hidden;
    background-size:100px 100px;
    background-image: linear-gradient(-45deg,
    #5eab1f 25%, #8cc433  25%,
    #8cc433  50%, #5eab1f 50%,
    #5eab1f 75%, #8cc433  75%);
    background-image: -webkit-linear-gradient(-45deg,
    #5eab1f 25%, #8cc433  25%,
    #8cc433  50%, #5eab1f 50%,
    #5eab1f 75%, #8cc433  75%);
    animation:anim 1s linear infinite;
    -webkit-animation:anim 1s linear infinite;
}
    
@keyframes anim {
  0% { background-position: 0 0; }
  100% { background-position: 50px 50px; }
}

@-webkit-keyframes anim {
  0% { background-position: 0 0; }
  100% { background-position: 50px 50px; }
}