sass-site/source/assets/css/components/_progress.scss

$progress-block-count: 8;
$progress-block-size: $font-unit;

// without the 's' for seconds...
$progress-block-animation-duration: 1;

$progress-block-delay-interval: 1 / $progress-block-count;



.progress {
  @include stretch;
  @include square(100%);
}

.progress-wrap { @extend %table-layout; }

.progress-center {
  @extend %table-layout-cell;
  text-align: center;
}

.progress-bar {
  position: relative;
  display: inline-block;
  width: $progress-block-count * $progress-block-size;
  height: $progress-block-size;
  vertical-align: middle;
}

.progress-block {
  @include animation-name(progress-block);
  @include animation-duration(#{$progress-block-animation-duration}s);
  @include animation-iteration-count;
  @include animation-direction;
  @include square($progress-block-size);
  position: absolute;
  top: 0;
  background: $color-primary;
}

@for $i from 1 through $progress-block-count {
  .progress-block:nth-child(#{$i}) {
    @include animation-delay(#{$progress-block-delay-interval * ($i - 1) * $progress-block-animation-duration}s);
    left: $progress-block-size * ($i - 1);
   }
}

@include keyframes(progress-block, background-color, $color-primary, transparent);