A Pen by Lawren.

index.html

<div class="ring">
  <ul>
    
  </ul>
</div>
  

script.js

$(function(){
  var numLines = 50;
  for (var i = 0; i < numLines; i++) {
    $('ul').append('<li></li>');
  }
  
  var zInc = 360 / $('li').length;
  for (var i = 0; i < $('li').length; i++) {
    $('li').eq(i).css('-webkit-animation-delay', (i * 3/numLines) + 's')
    //.css('border-color', 'hsla(' + ( 255/numLines * i) + ', 50%, 50%, 1)')
  }
})

style.css

.ring {
  -webkit-transform-style: preserve-3d;
  -webkit-perspective: 800;
}
ul { list-style-type: none; width:100%; height: 100%; }
li {
  display: block;
  width: 100%;
  border: #000 5px solid;
  border-radius: 100%;
  -webkit-animation: spin linear 3s infinite;

}

@-webkit-keyframes spin {
  0% { border-color: hsla(0, 50%, 50%, 1);}
  10% { border-color: hsla(36, 50%, 50%, 1);}
  20% { border-color: hsla(72, 50%, 50%, 1);}
  30% {border-color: hsla(108, 50%, 50%, 1);}
  40% {border-color: hsla(144, 50%, 50%, 1);}
  50% {border-color: hsla(180, 50%, 50%, 1);}
  60% {border-color: hsla(216, 50%, 50%, 1);}
  70% { border-color: hsla(252, 50%, 50%, 1);}
  80% {border-color: hsla(288, 50%, 50%, 1);}
  90% {border-color: hsla(324, 50%, 50%, 1);}
  100% {-webkit-transform: rotateZ(360deg); border-color: hsla(360, 50%, 50%, 1);}
}

Swoooosh.markdown

Swoooosh

A bit of JS and CSS3 to make a stack of "needles" that eventually start spinning and cycling through the color wheel. You can play with the first variable to change the pattern and effects.

A Pen by Lawren on CodePen.

License.