TimeMachine-Inspired Progress Indicator Using CSS Keyframes Animation

by dswitzer

HTML

<h1>
  TimeMachine-Inspired Progress Indicator Using CSS Keyframes Animation
</h1>

<div class="progress-bar">
  <div class="progress-bar__indicator"></div>
</div>

CSS

.progress-bar {
  background-color: #e0e0e0 ;
  border-radius: 7px 7px 7px 7px ;
  box-shadow: inset 0px 1px 1px rgb( 0, 0, 0, 0.1 ) ;
  height: 7px ;
  overflow: hidden ;
  position: relative ;
  width:  300px ;
}

.progress-bar__indicator {
  background-color: #ff00c8 ;
  border-radius: 7px 7px 7px 7px ;
  box-shadow: inset 0px -7px 3px -7px rgb( 100, 0, 78, 0.6 ) ;
  height: 7px ;
  left: 0px ;
  position: absolute ;
  top: 0px ;
  width: 40% ;

  animation-duration: 1750ms ;
  animation-fill-mode: both ;
  animation-iteration-count: infinite ;
  animation-name: progress-bar-calculating ;
  animation-timing-function: linear ;
}

@keyframes progress-bar-calculating {
  0% {
    left: -20% ;
  }
  50% {
    left: 80% ;
  }
 100% {
    left: -20% ;
  }
}