​

​

$bar: 20px;

$foo: $bar * 16;

$color: #c5cae9;

​

body {

  background: #1a237e;

  font-family: 'Source Sans Pro';

  font-weight: 400;

  font-size: 22px;

  line-height: 1em;

  color: $color;

}

​

.container {

  margin: 0 auto; // rough center

  width: $foo;

  padding: 0 0 10px 10px;

  height: auto;

  border: solid $color;

  border-width: 0 0 1px 1px;

}

​

h1 {

  text-align: center;

  font-weight: 700;

  line-height: 1em;

}

​

.loading-bar {

  position: relative;

  width: $foo;

  height: $bar;

  margin-top: 70px;

  top: -1 * $bar;

  &:before {

    position: relative;

    top: $bar;

    left: -300px - 20;

    display: block;

    width: 300px;

    content: '';

    text-align: right;

    text-transform: lowercase;

  }

  &.option1 {

    &:before {

      content: 'Linear';

    }

    .loading {

      animation-timing-function: linear;

    }

  }

  &.option2 {

    &:before {

      content: 'Ease-in';

    }

    .loading {

      animation-timing-function: ease-in;

    }

  }

  &.option3 {

    &:before {

      content: 'Ease-out';

    }

    .loading {

      animation-timing-function: ease-out;

    }

  }

  &.option4 {

    &:before {

      content: 'Ease';

    }

    .loading {

      animation-timing-function: ease;

    }

  }

  &.option5 {

    &:before {

      content: 'Steps(4)';

    }

    .loading {

      animation-timing-function: steps(4);

    }

  }

  &.option6 {

    &:before {

      content: 'cubic-bezier(0,1,1,0)';

    }

    .loading {

      animation-timing-function: cubic-bezier(0,1,1,0);

    }

  }

  .loading {

    position: relative;

    width: $bar;

    height: $bar;

    background: $color;

    animation: grow 4s linear infinite, move 4s linear infinite;

  }

}

​

@keyframes move {

  0%    { left: 0           ; }

  16.7% { left: 0           ; }

  33.3% { left: $foo / 2    ; }

  50%   { left: $foo - $bar ; }

  66.7% { left: $foo / 2    ; }

  83.3% { left: 0           ; }

  100%  { left: 0           ; }

}

​

@keyframes grow {

  0%    { width: $bar     ; }

  16.7% { width: $foo / 2 ; }

  33.3% { width: $foo / 2 ; }

  50%   { width: $bar     ; }

  66.7% { width: $foo / 2 ; }

  83.3% { width: $foo / 2 ; }

  100%  { width: $bar     ; }

}