A cool CSS spinner with LESS variables

This is a quick and dirty translated post I wrote in French some time ago.

I was playing with some css 2D transforms when I kinda ended with this css spinner 🙂 I chose LESS and yes I could have used SASS, sorry for fan boys :P.

The spinner itself

The HTML code

<div class="loader rspin">
  <span class="c"></span>
  <span class="d spin"><span class="e"></span></span>
  <span class="r r1"></span>
  <span class="r r2"></span>
  <span class="r r3"></span>
  <span class="r r4"></span>

The CSS code

Ok ok, the end CSS is quite hard to read so here’s the LESS variables at the beginning of the file.

@loaderSize : 55px;
@radThickness : @loaderSize/10;
@spinSpeed : 750ms;
@backgroundColor : #eee;
@forgroundColor : #ccc;
@masksColor : #fff;
@middleCircleSize : 68%;

From the @loaderSize variable you can control the spinner height, preserving all its children elements proportions.


  • Works on every modern browsers and on mobiles.
  • No HTTP request to load an animated gif file.
  • You can zoom you browser and the spinner will stay perfect.
  • Its height is customizable with the LESS variables.
  • Permet de frimer en soirée geek 🙂 [just don’t know how to translate this in english]


  • More complicated to manage than a simple animated gif.
  • No ie9.
  • 8 divs instead of one tag.

2 thoughts on “A cool CSS spinner with LESS variables

Leave a Reply