Pure CSS spinner

I already showed you how to make spinners out of font icons.

Some times you might not want to use a font, here's how to can create a spinner using CSS pseudo-elements.

Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document. For example, the ::first-line pseudo-element targets only the first line of an element specified by the selector.

from Mozilla

We're going to use :before and :after to add transparent borders to our circles.

Tip: we create CSS circles using border-radius: 50%

pure css spinners

I won't bore you a text explanation, best thing you can do is jump into the code below:


Please notice the CSS above is prefix free, what means you'll have to add -moz, -webkit... to fit your needs. Check out the source code on the Demo to see the prefixed CSS.


View Demo

Leave a Reply

Add <code> Some Code </code> by using this tags.