Simple
<paper-spinner>

Star

Intrigued by Keanu Lee's brilliant article describing how he built the official <paper-spinner> Polymer element seen in the Google Material Design spec, I had to see if it was possible to simplify the spinner further by condensing it down to a single HTML element. My goal was to rebuild the paper-spinner in a way that was:

Well…I got really close. Check it out. (Pull requests are more than welcome.)

Default

<div class="spinner" role="progressbar" aria-valuetext="Loading…"></div>

Preset colors

<div class="spinner" data-options="blue" role="progressbar" aria-valuetext="Loading…"></div>

Preset sizes



<div class="spinner" data-options="large" role="progressbar" aria-valuetext="Loading…"></div>

Completely custom


<div class="spinner" data-options="blue" style="font-size:71px;box-shadow:inset 0 0 0 2px" role="progressbar" aria-valuetext="Loading…"></div>

Multicolor


<div class="spinner" data-options="multicolor" role="progressbar" aria-valuetext="Loading…"></div>

How it's done


Outstanding resources

*I use clip-path: circle(), which is not available in IE or Firefox, as a progressive enhancement only to remove small artifacts left over from the animations.

**All spinners animate with composite properties except the multicolor spinner. The multicolor spinner unfortunately invokes repaints on color changes. :/ On the plus side, I haven't seen the frame rate dip below 60fps.