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:

The CSS

/* Styles for all the Spinners */ .spinner { position: relative; display: inline-block; margin: 0 12.5% 100px; width: 120px; height: 120px; border: 2px solid #34495e; border-radius: 50%; animation: spin 0.75s infinite linear; } .spinner::before, .spinner::after { left: -2px; top: -2px; display: none; position: absolute; content: ''; width: inherit; height: inherit; border: inherit; border-radius: inherit; } /* Keyframes for the animation */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Specific spinners */ /* Spinner 1 */ .spinner-1 { border-top-width: 0; } /* Spinner 2 */ .spinner-2 { border-top-color: transparent; } .spinner-2::after { display: block; left: -2px; top: -2px; border: inherit; transform: rotate(65deg); } /* Spinner 3 */ .spinner-3, .spinner-3::before, .spinner-3::after { display: inline-block; border-color: transparent; border-top-color: #34495e; animation-duration: 1.2s; } .spinner-3::before { transform: rotate(120deg); } .spinner-3::after { transform: rotate(240deg); }
Code language: CSS (css)

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.

The HTML

<div class="spinner spinner-1"></div> <div class="spinner spinner-2"></div> <div class="spinner spinner-3"></div>
Code language: HTML, XML (xml)

Demo

View Demo

Leave a Reply

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

*
*