// default
[class^="preloader"],
[class*=" preloader"]
{
  height: 2em;
  width: 2em;
  animation: spin .8s infinite cubic-bezier(.45,.05,.55,.95);
  @include icon('preloader');
}



/**
 * 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:      $gray-dark;      // 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 * 3.1416; // * 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;
    display: inline-block;

    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;
    }
  }
}



.preloader
{
  // https://tobiasahlin.com/spinkit/
  &.two-balls
  {
    height: 4em;
    width: 4em;
    position: relative;
    animation: spin 2.0s infinite linear;

    &::before
    {
      content: ' ';
      width: 60%;
      height: 60%;
      display: inline-block;
      position: absolute;
      top: 0;
      background-color: #333;
      border-radius: 100%;
      animation: bounce 2.0s infinite ease-in-out;
    }

    &::after
    {
      content: ' ';
      width: 60%;
      height: 60%;
      display: inline-block;
      position: absolute;
      top: auto;
      bottom: 0;
      background-color: #333;
      border-radius: 100%;
      animation: bounce 2.0s infinite ease-in-out;
      animation-delay: -1.0s;
    }
  }
}