@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);
  }
}