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

<div class="spinner spinner-1"></div>

<div class="spinner spinner-2"></div>

<div class="spinner spinner-3"></div>

Demo

View Demo

About Ricard Torres

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.

@ricard_dev @ricard_dev

📝 Blog 🎙 Podcast

Leave a Reply

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

*
*