// vars --------------------

// $size
$loading__timer--pointer-width: 8px;
$loading__timer--size: 120px;

// $speed
$loading__timer--speed: 12s;

// $color
$loading__timer--color: white;



// mixins --------------------

@mixin animation($_name) {
  animation: #{$_name};
}

// keyframes
@mixin keyframes($_anim-name) {
  @keyframes #{$_anim-name} {
    @content;
  }
}

// animation pointer
@include keyframes(pointer) {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



// base --------------------

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #09f;
}



// styles --------------------

// timer
.timer {
  width: $loading__timer--size;
  height: $loading__timer--size;
  border: $loading__timer--pointer-width solid $loading__timer--color;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);

  &:before,
  &:after {
    content: '';
    height: $loading__timer--pointer-width;
    position: absolute;
    border-radius: 300px;
    background-color: $loading__timer--color;
    top: calc(50% - #{$loading__timer--pointer-width}/2);
    left: calc(50% - #{$loading__timer--pointer-width}/2);
    transform-origin: $loading__timer--pointer-width/2 $loading__timer--pointer-width/2;
  }

  &:before {
    width: 26%;
    @include animation(pointer $loading__timer--speed linear infinite);
  }

  &:after {
    width: 46%;
    @include animation(pointer $loading__timer--speed/12 linear infinite);
  }
}



// animation --------------------

@keyframes pointer {
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg) }
}