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%;
@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
- 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”
This is definitely beautiful! I will implement this in my next projects. Thanks.
Cool! Thx a lot 🙂