A Pen by Rplus.

index.html

<h1>Pure CSS Loader</h1>
<div class="loader"></div>

Pure-CSS-Loader.markdown

Pure CSS Loader

Pure CSS loader using shadows and keyframe animation.

Forked from Josh Bader's Pen Pure CSS Loader.

Compass version.

A Pen by Rplus on CodePen.

License.

style.scss

@import "compass/css3";
html {
  height: 100%;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
  background: #222 -webkit-radial-gradient(50% 0, ellipse farthest-corner, #444 0%, #222 100%)
}

h1 {
  margin-top: 60px;
  color: #222;
  font-weight: normal;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255,255,255,0.1);
}

$dot-num: 8;
$dot-color: #fff;
$dot-size: 8px;
$dot-radius: 14px;

@function cycle-box-shadow ($n: $dot-num, $color: $dot-color) {
  $deg: 360deg / $n;
  $opacity-diff: 0.8 / $n;
  $shadow: '';
  @for $i from 1 through $n {
    @if $i != 1 {
      $shadow: $shadow + ',';
    }
    $shadow: '#{$shadow} ' + round($dot-radius * cos($deg * $i)) + ' ' + round($dot-radius * sin($deg * $i)) + ' ' + floor(0.5px * ($i - 1)) + ' ' + rgba($color, 1 - $i * $opacity-diff);
  }

  @return unquote($shadow);
}

.loader {
  width: $dot-size;
  height: $dot-size;
  margin: 40px auto;
  opacity: 0.5;
  border-radius: 50%;
  box-shadow: cycle-box-shadow();
  transform-origin: 50%;
  animation: load .9s steps($dot-num, end) infinite;
}

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