CodePen Embed - Material Design CSS

<div class="show-c full-v">
  <header class="word">
    <div class="loader-circle g-pride-color">
      <div class="loader-stroke">
        <div class="loader-stroke-left"></div>
        <div class="loader-stroke-right"></div>
      </div>
    </div>
    <div class="title">
      Loading<br/>
      <small>#prideforeveryone</small>
    </div>
  </header>
  <div class="show">
    <div class="show block blue">
      
            <div class="loader-circle slow">
              <div class="loader-stroke">
                <div class="loader-stroke-left"></div>
                <div class="loader-stroke-right"></div>
              </div>
            </div>
      
    </div>
    <div class="show block">
      
            <div class="loader-circle google-color slow">
              <div class="loader-stroke">
                <div class="loader-stroke-left"></div>
                <div class="loader-stroke-right"></div>
              </div>
            </div>
      
    </div>
    <div class="show block">
      
            <div class="loader-circle g-plus-color slow">
              <div class="loader-stroke">
                <div class="loader-stroke-left"></div>
                <div class="loader-stroke-right"></div>
              </div>
            </div>
      
    </div>
  </div>
  <div class="show">
    <div class="show block blue">
      
            <div class="loader-circle">
              <div class="loader-stroke">
                <div class="loader-stroke-left"></div>
                <div class="loader-stroke-right"></div>
              </div>
            </div>
      
    </div>
    <div class="show block">
      
            <div class="loader-circle google-color">
              <div class="loader-stroke">
                <div class="loader-stroke-left"></div>
                <div class="loader-stroke-right"></div>
              </div>
            </div>
      
    </div>
    <div class="show block">
      
            <div class="loader-circle g-plus-color">
              <div class="loader-stroke">
                <div class="loader-stroke-left"></div>
                <div class="loader-stroke-right"></div>
              </div>
            </div>
      
    </div>
  </div>
  <div class="show">
    <div class="show block blue">
      
            <div class="loader-circle w-12px">
              <div class="loader-stroke">
                <div class="loader-stroke-left"></div>
                <div class="loader-stroke-right"></div>
              </div>
            </div>
      
    </div>
    <div class="show block">
      
            <div class="loader-circle google-color w-12px">
              <div class="loader-stroke">
                <div class="loader-stroke-left"></div>
                <div class="loader-stroke-right"></div>
              </div>
            </div>
      
    </div>
    <div class="show block">
      
            <div class="loader-circle g-plus-color w-12px">
              <div class="loader-stroke">
                <div class="loader-stroke-left"></div>
                <div class="loader-stroke-right"></div>
              </div>
            </div>
      
    </div>
  </div>
</div>

/*\
 *  Template-1  -2017/01/14
 *  @mixin flexbox
 *  @mixin center
 *  .show-c .show
 *  .full-v .full-vw .full-vh
 *  .full   .full-w  .full-h
 *  %pseudo
\*/
//--------------------------------------------------

body {
  font-size: 14px;
  overflow: hidden;
}
.word {
  @include center;
  height: 8rem;
  margin-bottom: 10px;
  font-size: 3rem;
  font-family: sans-serif;
}
.title {
  margin-left: 2rem;
  small {
    font-family: monospace;
    font-size: 1rem;
    color: #2a74f6;
  }
}
.block {
  width: 7rem; height: 7rem;
  margin: 2px;
  font-size: 1.5rem;
  background-color: #eee;
}
.blue  { background-color: #2a74f6; color:#fff; }
/**/
//--------------------------------------------------

// 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);

.loader-circle {
  @include loader_circle(loader-stroke);
  @include loader_stroke_colors(loader-stroke, google-color, $google_colors);
  @include loader_stroke_colors(loader-stroke, g-plus-color, $g_plus_colors);
  @include loader_stroke_colors(loader-stroke, g-pride-color, $google_pride_colors);
  @include loader_stroke_width(loader-stroke, w-12px, 12px);
  @include loader_stroke_rotate_step(slow, 0);
}

View Compiled

// NO JavaScript

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

// GitHub: https://github.com/YuRen-tw/material-circular-loader

This Pen is owned by YuRen-tw on CodePen.

See more by @YuRen on CodePen

External CSS

https://codepen.io/YuRen/pen/qZJWOG.scss

External JavaScript

This Pen doesn't use any external JavaScript resources.