Vivid CSS3 Spinner

index.html

<section class="wrapper">
  <div class="spinner">
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
  </div>
</section>

<section class="wrapper dark">
  <div class="spinner">
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
  </div>
</section>

script.js

/* 
Vivid CSS3 Spinner
Made by Kevin Jannis (@kevinjannis)
Inspired by http://gif.flrn.nl/post/111106392227
View more at www.janniskev.in
*/

style.scss

@import "compass/css3";

$colors: #2172b8
         #18a39b
         #82c545
         #f8b739
         #f06045
         #ed2861
         #c12680
         #5d3191;

$inner: 30px;
$border: 6px;
$spacing: 1px;

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

section.wrapper {
  padding: 40px 0;
  
  &.dark {
    background: #313134;
  }
}

div.spinner {
  @include animation(rotate 10s infinite linear);
  position: relative;
  display: block;
  
  margin: auto;
  
  $size: $inner + length($colors) * ($border + $spacing) * 2;
  
  width: $size;
  height: $size;

  i {
    @include animation(
      rotate 3s infinite cubic-bezier(.09, .6, .8, .03)
    );
    @include transform-origin(50%, 100%, 0);

    position: absolute;
    display: inline-block;

    top: 50%;
    left: 50%;

    border: solid $border transparent;
    border-bottom: none;

    @each $current in $colors {
      $i: index($colors, $current);

      &:nth-child(#{$i}) {
        $size: $inner + $i * ($border + $spacing) * 2;

        @include animation-timing-function(
          cubic-bezier(.09, .3 * $i, .12 * $i, .03)  
        );

        width: $size;
        height: $size / 2;

        margin-top: -$size / 2;
        margin-left: -$size / 2;

        border-color: $current;

        border-top-left-radius: $inner + $i * $border;
        border-top-right-radius: $inner + $i * $border;
      }
    }
  }
}

@include keyframes(rotate) {
  to {
    @include rotateZ(360deg);
  }
}

vivid-css3-spinner.markdown

Vivid CSS3 Spinner

A Pen by Kevin Jannis on CodePen.

License.