md-preloader.less

/**
 * Google Material Design Preloader
 *
 * CSS animated SVG implementation of the Google Material Design preloader
 *
 * Reference: http://goo.gl/ZfulRH
 * License: MIT
 * Author: Rudi Theunissen (rudolf.theunissen@gmail.com)
 * Version: 1.1.1
 */
.md-preloader {
  @easing:      cubic-bezier(.8,.0,.4,.8);

  @speed:      1320ms;       // animation time for each loop
  @color:      #448AFF;      // Blue A200 in the Material Design color palette
  @linecap:    square;       // could be 'round', but the official one is square
  @loops:      5;            // number of points where the arc meets
  @arc:        0.72;         // fraction of the circumference that the arc grows to
  @perimeter:  67px * pi();  // circumference of the raw svg inner cricle

  // measure to prevent inline block spacing from affecting the outer rotation
  font-size: 0;

  display: inline-block;
  animation: outer @speed * @loops linear infinite;

  svg {
    animation: inner @speed linear infinite;

    circle {
      fill: none;
      stroke: @color;
      stroke-linecap: @linecap;
      animation: arc @speed @easing infinite;
    }
  }

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

  @keyframes inner {
    0% {
      transform: rotate(-360deg * (1 - @arc));
    }
    100% {
      transform: rotate(0);
    }
  }

  @keyframes arc {
    0% {
      stroke-dasharray: 1 @perimeter;
      stroke-dashoffset: 0;
    }
    40% {
      stroke-dasharray: @arc * @perimeter, @perimeter;
      stroke-dashoffset: 0;
    }
    100% {
      stroke-dasharray: 1 @perimeter;
      stroke-dashoffset: -@arc * @perimeter;
    }
  }
}