A Pen by Russell.

index.jade

#spinner

script.js

// If you change the createDots count, don't forget to increase the $ballCount in the styles as well.
var $spinner = document.getElementById('spinner');
$spinner.innerHTML = createBalls(8);














function createBalls (num) {
  var result = '';
  for (i=0; i<num; i++) {
    result += '<div class="d'+(i+1)+'"></div>';
  }
  return result;
}

Spinner-animation.markdown

Spinner animation

This is a spinner/loading animation I created after seeing the effect in a gif a while back but can no longer find the source. The gif had the spokes showing which really helps explain how simple delaying of an animation can create the circular motion.

To show the spokes, reduce the transparency in the $spokeColor CSS variable (stylus).

If you look closely you can see that the math isn't quite tight enough to trick the eye into seeing this as a solid circle (of circles). It does "pull" out of shape near the end of the rotation.

A Pen by Russell on CodePen.

License.

style.stylus

/*
If you change the $ballCount count, don't forget to increase the createBalls in the styles as well.
*/
$radius = 500px
$ballSize = 20px
$ballCount = 8
$duration = 2s
$spokeColor = rgba(255,255,255,0.0)

$delayAmt = ($duration/$ballCount)
$pathAngle = 180/$ballCount







@keyframes ballMove 
  0% { -webkit-transform: translate(0,0) }
  100% { -webkit-transform: translate($radius - $ballSize,0) }

body 
  background : #333
  text-align : center

#spinner
  background : transparent
  width : $radius 
  height : $radius 
  border-radius : 50%
  position : relative
  margin : 0 auto
  > div
    width : 100%
    height : 1px
    position : absolute
    top : 50%
    left : 0%
    background-color: $spokeColor
    &:after
      content : ''
      background : #333;
      display : block
      position : absolute
      top : -($ballSize/2)px
      width : $ballSize
      height : @width
      border-radius : 50%
      animation-name : ballMove
      animation-duration : $duration
      animation-timing-function : ease-in-out
      animation-iteration-count : infinite
      animation-direction : alternate;
  for i in 0..$ballCount
    .d{i+1}
      transform : rotate((i*$pathAngle)deg)
      &:after
        animation-delay : (i*$delayAmt)s
        background-color : hsla((180/$ballCount)*i, 100%, 50%, 1)