EaJRbr

EaJRbr.markdown

EaJRbr

A Pen by Ferncoder on CodePen.

License.

index.html

<span class="loading-bar"></span>
<span class="loading-bar"></span>
<span class="loading-bar"></span>
<span class="loading-bar"></span>

style.scss

@import "compass/css3";
@import "compass/css3/animation";

$background-color: #2980b9;

$height-max: 10px;
$height-min: $height-max / 3;

$width-max: 10px;
$width-min: $width-max/5;

$margin-max: ($height-min) ($width-min*2);
$margin-min: 0;

@mixin starting-state {
    opacity: 1;
    height: $height-max;
    width: $width-max;  
    margin: $margin-min;
}

@mixin ending-state {
    opacity: 0;
    height: $height-min;
    width: $width-min;  
    margin: $margin-max;
}

@include keyframes(loading) {
  0% {
    @include starting-state
  }
  100% {
    @include ending-state
  }
}

.loading-bar {
  display: inline-block;
  background: $background-color;
  @include border-radius(100px);
  @include animation(loading 1s 0.5s infinite linear alternate);
}