Material Circular Loader

Google Material design: Progress & activity

Usage

HTML

<div class="circular-loader">
  <div class="stroke">
    <div class="stroke-left"></div>
    <div class="stroke-right"></div>
  </div>
</div> 

SCSS

.circular-loader {
  @include loader_circle(stroke); // class name of stroke
}

Size

Width and height are 2em. (radius of circle is 1em)
Use font-size to change the loader size.

SCSS

.circular-loader {
  @include loader_circle(stroke);
  font-size: 30px; // width and height become 60px
}

Single Color

Use color to change the loader color.

SCSS

.circular-loader {
  @include loader_circle(stroke);
  color: #2a74f6;
}

Multiple Colors

Include mixin loader_stroke_colors to change the loader color.

HTML

<div class="Cir my-color"> <!-- add a class -->
  <div class="S">
    <div class="S-left"></div>
    <div class="S-right"></div>
  </div>
</div> 

SCSS

.Cir {
  @include loader_circle(S);
  @include loader_stroke_colors(
    S,
    my-color,
    (#4285f4, #ea4335, #fbbc05, #34a853)
  );
  // (classNameOfStroke, addedClassName, listOfColors)
}

There are some lists of colors can be used:

List of colors	Description	Colors
$google_colors	Google main colors	Blue, Red, Yellow, Green
$google_colors_old	(Old version)
$g_plus_colors	Colors in Google+ app	7 colors
$google_pride_colors	#prideforeveryone	6 colors

Stroke Width

Stroke width defaults to (3/14) * 1em.
Include mixin loader_stroke_width to change the stroke width.

HTML

<div class="Cir new_width"> <!-- add a class -->
  <div class="S">
    <div class="S-left"></div>
    <div class="S-right"></div>
  </div>
</div> 

SCSS

.Cir {
  @include loader_circle(S);
  @include loader_stroke_width(S, new_width, 10px);
  // (classNameOfStroke, addedClassName, widthOfStroke)
}

Rotate Step

Rotate step defaults to 3 / 5. (a 5 pointed star shape)
Include mixin loader_stroke_rotate_step to change the rotate step.

HTML

<div class="Cir seven_star"> <!-- add a class -->
  <div class="S">
    <div class="S-left"></div>
    <div class="S-right"></div>
  </div>
</div> 

SCSS

.Cir {
  @include loader_circle(S);
  @include loader_stroke_rotate_step(seven_star, 3/7);
  // (addedClassName, step)
}