/* input variables*/
$loader-radius: 200;
$dot-radius: 10;
$trans: 2;
$speed: 5;
$animation-type: ease;

/* calculated */
$circumference: pi() * $loader-radius * 2;
$part: $circumference / 12;
$offset: (99.999 - $trans) / 12;


#dotloader {
  width: $loader-radius * 2px;
  height: $loader-radius * 2px;  
}

.part {
  width: #{$part / 2}px;
  margin-left: $part / 2 * -1px;
  margin-top: $dot-radius * -1px;
  height: $dot-radius * 2px;
  display: block;
  float: left;
  position: absolute;
  transform-origin: 50% 50%;
  
  &::before {
    width: $dot-radius * 2px;
    height: $dot-radius * 2px;
    background: #CCC;
    border-radius: 50%;
    display: block;
    content: "";
    float: left;
    position: absolute;
    left: $dot-radius * -1px;
  }

  &::after {
    width: $dot-radius * 2px;
    height: $dot-radius * 2px;
    background: #CCC;
    border-radius: 50%;
    display: block;
    content: "";
    float: right;
    position: absolute;
    right: $dot-radius * -1px;
  }
}

@for $i from 1 to 13 {
  .part:nth-child(#{$i}) {
    transform: translate($loader-radius * 1px, $loader-radius * 1px)  rotate(#{$i * 360 / 12 - 90}deg)  translateX($loader-radius*1px - $dot-radius) rotate(90deg);

animation: dotloader#{$i} #{$speed}s $animation-type infinite;

		&::before, &::after {
      animation: partColor#{$i} #{$speed}s $animation-type infinite;
    }
  }

	@keyframes partColor#{$i} {
     #{($i - 1)*$offset}% {
      background: #CCC;      
     }
      #{$trans + ($i - 1)*$offset}% {
		background: #811;      
      }
      #{$i*$offset + $trans}% {
        background: #CCC;
      }
  }

	@keyframes dotloader#{$i} {
   @if $i % 2 == 0 {
      #{($i - 1)*$offset}% {
      transform: translate($loader-radius * 1px, $loader-radius * 1px)  rotate(#{$i * 360 / 12 - 90}deg)  translateX($loader-radius*1px - $dot-radius) rotate(90deg) rotate(0deg);
      }
      #{$i*$offset + $trans}% {
      transform: translate($loader-radius * 1px, $loader-radius * 1px)  rotate(#{$i * 360 / 12 - 90}deg)  translateX($loader-radius*1px - $dot-radius) rotate(90deg) rotate(180deg);      
      }
      #{0.0001 + $i*$offset + $trans}% {
      transform: translate($loader-radius * 1px, $loader-radius * 1px)  rotate(#{$i * 360 / 12 - 90}deg)  translateX($loader-radius*1px - $dot-radius) rotate(90deg) rotate(0deg);   
      }
		} @else {
      #{($i - 1)*$offset}% {
      transform: translate($loader-radius * 1px, $loader-radius * 1px)  rotate(#{$i * 360 / 12 - 90}deg)  translateX($loader-radius*1px - $dot-radius) rotate(90deg) rotate(0deg);
      }
      #{$trans + $i*$offset}% {
      transform: translate($loader-radius * 1px, $loader-radius * 1px)  rotate(#{$i * 360 / 12 - 90}deg)  translateX($loader-radius*1px - $dot-radius) rotate(90deg) rotate(-180deg);      
      }
      #{0.00001 + $i*$offset + $trans}% {
      transform: translate($loader-radius * 1px, $loader-radius * 1px)  rotate(#{$i * 360 / 12 - 90}deg)  translateX($loader-radius*1px - $dot-radius) rotate(90deg) rotate(0deg);   
      }
    }    
  }
}


/** styling **/
body {
  background: #222;
}
.center {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
}