CSS: progress bar

by Julien Roche

HTML

<div class="progress"></div>

CSS

.progress {
  animation: 3s linear 250ms 1 normal forwards progression;
  background: linear-gradient(to right, rgba(172, 182, 182, 0.3) 50%, transparent 50%);
  background-position: 100% 0%;
  background-size: 200% 100%;
  border: 1px solid rgb(172, 182, 182);
  height: 3rem;
}

@keyframes progression {
  0% {
    background-position: 100% 0%;
  }
  
  100% {
    background-position: 0% 0%;
  }
}