circular-loader.scss

// Setting
$LOADER_S_Tail:   5deg;  // less than (360deg - $LOADER_S_Body) / 2
$LOADER_S_Body: 270deg;
$LOADER_SPEED: 1333ms;
$LOADER_TIMEING_FUNCTION: cubic-bezier(0.4, 0.0, 0.2, 1);

// Loader Stroke Degree
$LOADER_S_AIR: 360deg - $LOADER_S_Body;
$LOADER_S_S: $LOADER_S_Tail * 2;
$LOADER_S_L: $LOADER_S_Tail * 2 + $LOADER_S_Body;

// Default
$LOADER_SIZE: 1em * (28 / 14);
$LOADER_STROKE_WIDTH: 1em * (3 / 14);
$LOADER_FOOT: 360deg * (3 / 5);
$LOADER_CIRCLE_ROTATE_SPEED: 360deg / ($LOADER_FOOT + $LOADER_S_AIR) * $LOADER_SPEED;

// Loader Stroke Rotate Step
@function GCD($a, $b) {
  @if $b == 0 { @return $a; }
  @else { @return GCD($b, $a % $b); }
}
@function LCM($a, $b) {
  @return $a * $b / GCD($a, $b);
}
$LOADER_STROKE_ROTATE_STEP: LCM(360, $LOADER_S_Body / 1deg) / ($LOADER_S_Body / 1deg);

// Keyframes
@keyframes L_circle_rotate {
  0%   { transform: rotate(  0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes L_stroke_rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate($LOADER_S_Body * $LOADER_STROKE_ROTATE_STEP); }
}
@keyframes L_stroke_fix {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate($LOADER_S_Body / 2); }
  100% { transform: rotate($LOADER_S_Body); }
}
@keyframes L_stroke_left_grow {
  0%   { transform: rotate(0deg - $LOADER_S_S / 2); }
  50%  { transform: rotate(0deg - $LOADER_S_L / 2); }
  100% { transform: rotate(0deg - $LOADER_S_S / 2); }
}
@keyframes L_stroke_right_grow {
  0%   { transform: rotate($LOADER_S_S / 2); }
  50%  { transform: rotate($LOADER_S_L / 2); }
  100% { transform: rotate($LOADER_S_S / 2); }
}

// Animation Function
@function L_circle_rotate_F($speed){
  @return (
    /* animation-name:            */ L_circle_rotate
    /* animation-duration:        */ $speed
    /* animation-timing-function: */ linear
    /* animation-iteration-count: */ infinite
    /* animation-fill-mode:       */ both
  );
}
@function L_stroke_rotate_F(){
  @return (
    /* animation-name:            */ L_stroke_rotate
    /* animation-duration:        */ $LOADER_SPEED * $LOADER_STROKE_ROTATE_STEP
    /* animation-timing-function: */ steps($LOADER_STROKE_ROTATE_STEP)
    /* animation-iteration-count: */ infinite
    /* animation-fill-mode:       */ both
  );
}
@function L_stroke_fix_F(){
  @return (
    /* animation-name:            */ L_stroke_fix
    /* animation-duration:        */ $LOADER_SPEED
    /* animation-timing-function: */ $LOADER_TIMEING_FUNCTION
    /* animation-iteration-count: */ infinite
    /* animation-fill-mode:       */ both
  );
}
@function L_stroke_side_grow_F($side){
  @return (
    /* animation-name:            */ L_stroke_#{$side}_grow
    /* animation-duration:        */ $LOADER_SPEED
    /* animation-timing-function: */ $LOADER_TIMEING_FUNCTION
    /* animation-iteration-count: */ infinite
    /* animation-fill-mode:       */ both
  );
}

// Style Extend
@function other_side($side) {
  @if $side == right    { @return left; }
  @elseif $side == left { @return right; }
}
%before { content: ""; display: block; }
%loader_size {
  width: $LOADER_SIZE; height: $LOADER_SIZE;
  box-sizing: border-box;
  border-radius: 50%;
}
%loader_stroke {
  border-style: solid;
  border-width: $LOADER_STROKE_WIDTH;
  border-color: currentColor;
}
%loader_stroke_clip {
  &_right {
    position: absolute;
    clip: rect(0 $LOADER_SIZE $LOADER_SIZE $LOADER_SIZE/2);
  }
  &_left {
    position: absolute;
    clip: rect(0 $LOADER_SIZE/2 $LOADER_SIZE 0);
  }
  &_mid {
    position: absolute;
    clip: rect(0 $LOADER_SIZE/2 + .05em $LOADER_SIZE/2 $LOADER_SIZE/2 - .05em);
  }
}

// Loader Stroke Multiple Colors
@mixin make_stroke_colors_keyframes($keyframes_name, $colors_list) {
  $stroke_color_step: length($colors_list);
  $step_long: 100% / $stroke_color_step;
  
  @at-root {
    @keyframes #{$keyframes_name} {
      @for $i from 1 through $stroke_color_step {
        $begin: $step_long * ($i - 1);
        $end: $begin + $step_long * (3 / 5);
        #{$begin}, #{$end} { border-color: nth($colors_list, $i); }
      }
      100% { border-color: nth($colors_list, 1);}
    }
  }
}
@mixin loader_stroke_colors_animation($animation_list, $keyframes_name, $colors_list) {
  $stroke_color_step: length($colors_list);
  $colors_animation: (
    /* animation-name:            */ #{$keyframes_name}
    /* animation-duration:        */ $LOADER_SPEED * $stroke_color_step
    /* animation-timing-function: */ linear
    /* animation-iteration-count: */ infinite
    /* animation-fill-mode:       */ both
  );
  $animation_list: append($animation_list, $colors_animation);
  animation: $animation_list;
}

// Loader Mixin
@mixin loader_circle($stroke_name) {
  @extend %loader_size;
  animation: L_circle_rotate_F($LOADER_CIRCLE_ROTATE_SPEED);
  
  .#{$stroke_name}::before,   
  .#{$stroke_name}-right, .#{$stroke_name}-left { animation: L_stroke_fix_F(); }

  .#{$stroke_name} {
    @extend %loader_size;
    animation: L_stroke_rotate_F();
    &::before {
      @extend %before;
      @extend %loader_size;
      @extend %loader_stroke;
      @extend %loader_stroke_clip_mid;
    }
  }
  @each $side in (right, left) {
    .#{$stroke_name}-#{$side} {
      @extend %loader_size;
      @extend %loader_stroke_clip_#{$side};
  
      &::before {
        @extend %before;
        @extend %loader_size;
        @extend %loader_stroke;
        @extend %loader_stroke_clip_#{other_side($side)};
        animation: L_stroke_side_grow_F($side);
      }
    }
  }
}

@mixin loader_stroke_width($stroke_name, $class_name, $width) {
  &.#{$class_name} {
    .#{$stroke_name}::before,
    .#{$stroke_name}-right::before, .#{$stroke_name}-left::before { border-width: $width; }
  }
}

@mixin loader_stroke_colors($stroke_name, $class_name, $colors_list) {
  $keyframes_name: #{$class_name}_K;
  @include make_stroke_colors_keyframes($keyframes_name, $colors_list);
  &.#{$class_name} {
    .#{$stroke_name}::before {
      $animation_list: (L_stroke_fix_F(),);
      @include loader_stroke_colors_animation($animation_list, $keyframes_name, $colors_list);
    }
    
    @each $side in (right, left) {
      .#{$stroke_name}-#{$side}::before {
        $animation_list: (L_stroke_side_grow_F($side),);
        @include loader_stroke_colors_animation($animation_list, $keyframes_name, $colors_list);
      }
    }
  }
}

@mixin loader_stroke_rotate_step($class_name, $step) {
  $foot: 360deg * $step;
  $speed: 360deg / ($foot + $LOADER_S_AIR) * $LOADER_SPEED;
  &.#{$class_name} { animation: L_circle_rotate_F($speed); }
}

//--------------------------------------------------

// Google color (blue, red, yellow, green)
$google_colors_old: (#4285f4, #db4437, #f4b400, #0f9d58);
$google_colors: (#4285f4, #ea4335, #fbbc05, #34a853);
// Google+ color (red, purple, blue, cyan, green, yellow, orange)
$g_plus_colors: (#e53935, #aa00ff, #1d87e4, #00acc1, #7cb342, #f9a825, #ff7043);
// Google Pride color (red, orange, yellow, green, blue, purple) #prideforeveryone
$google_pride_colors: (#ff3d00, #fbbc05, #ffe600, #34a853, #4285f4, #673a87);

/*

.circular-loader {
  @include loader_circle(stroke);
  @include loader_stroke_colors(stroke, google-color, $google_colors);
}

*/