lila/ui/bits/css/learn/_progress.scss

.progress {
  @include box-radius;

  position: relative;
  height: 30px;
  color: $c-over;
  background: #1a7edb;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.progress .bar {
  @extend %box-radius-right;

  height: 100%;
  background: #1566b2;
  background-image: url('../images/grain.png');
  transform: translateX(-100px);
  animation:
    animated-background 50s linear infinite,
    animated-bar 1s forwards;
}

.progress .text {
  @include inline-start(0);

  position: absolute;
  top: 0;
  width: 100%;
  line-height: 30px;
  z-index: 3;
}

@keyframes animated-background {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 1000%;
  }
}

@keyframes animated-bar {
  from {
    transform: translateX(-100px);
  }

  to {
    transform: translateX(0);
  }
}