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);
}

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

View Demo

About Rick

Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

Leave a Reply

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

*
*