@mixin animation($animationName){

    @-webkit-keyframes #{$animationName}{

      @content

    }

    @-moz-keyframes #{$animationName}{

      @content

    }

    @-o-keyframes #{$animationName}{

      @content

    }

    @keyframes #{$animationName}{

      @content

    }

}

​

​

$col1:rgba(189,21,80,1);

$col2:rgba(233,127,2,1);

$col3:rgba(248,202,0,1);

$col4:rgba(138,155,15,1);

​

$baseColor:transparent;

​

$dimension:50px;

$rotation:360deg;

​

​

*{

  margin:0;

  padding:0;

}

​

html,body{

  width:100%;

  height:100%;

}

​

body{

  background:#222;

  overflow:hidden;

}

​

.wait{

  width:30px;

  height:30px;

  border-radius:50%;

  top:0;

  left:0;

  right:0;

  bottom:0;

  margin:auto;

  position:absolute;

  &:nth-child(2n-1){

    animation:rotate 2s infinite;

    border-top:$dimension/4 solid $baseColor;

    border-left:$dimension/2 solid $col2;

    border-right:$dimension/2 solid $col3;

    border-bottom:$dimension/4 solid $baseColor;

    &::before{

    content:'';

    display:block;

    width:$dimension;

    height:$dimension;

    position:absolute;

    background:$col3;

    top:-10px;

    left:$dimension/1.65;

    border-radius:50%;

    z-index:1;

    }

    &::after{

      content:'';

      display:block;

      width:$dimension;

      height:$dimension;

      position:absolute;

      background:$col2;

      top:-10px;

      left:-$dimension;

      border-radius:50%;

    }

  }

  &:nth-child(2n-2){

    animation:rotateAgainst 2s infinite;

    border-top:$dimension/2 solid $col1;

    border-left:$dimension/4 solid $baseColor;

    border-right:$dimension/4 solid $baseColor;

    border-bottom:$dimension/2 solid $col4;

    &::before{

    content:'';

    display:block;

    width:$dimension;

    height:$dimension;

    position:absolute;

    background:$col1;

    top:-$dimension;

    left:-$dimension/6;

    border-radius:50%;

    z-index:1;

    }

    &::after{

      content:'';

      display:block;

      width:$dimension;

      height:$dimension;

      position:absolute;

      background:$col4;

      top:$dimension/1.6;

      left:-$dimension/5;

      border-radius:50%;

    }

  }  

}

​

@include animation(rotate){

  0%{

    transform:rotate(0) scale(1);

  }

  50%{

    transform:rotate($rotation/2)scale(.5);

  }

  100%{

    transform:rotate($rotation) scale(1);

  }

}

@include animation(rotateAgainst){

  0%{

    transform:rotate(0) scale(1);

  }

  50%{

    transform:rotate(-$rotation/2)scale(.5);

  }

  100%{

    transform:rotate(-$rotation) scale(1);

  }

}