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>
</div>

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.

• Here’s the compiled CSS file.
• Here’s the LESS file.
• And the codepen demo

Pros

• 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]

Cons

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