CSS spinners with font icons

I love icon fonts such as Font Awesome, they're actually awesome.

The use of icons is perfect for retina display devices, you can style them, animate them, transform them...

Today I want to show you how to easily create a spinner out of this icon fonts.

font-icon-spinner

We'll use two concepts: @keyframes and animation.

Keyframes

We'll specify what should our animation do. In our case we can to transform (rotate) the element from 0 to 360deg

@keyframes rotation {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}

Animation

We'll have two different setups here. First of all we'll use the linear attribute which will create a continuous motion.

.spinner {
	animation: rotation 2s infinite linear;
}

For the other icon we want the animation to run in 8 steps. Why 8 steps? The icon we've chosen has 8 mini circles. We'll simulate a different kind of spinning. Don't worry, you'll get once you see the Demo.

.spinner {
	animation: rotation 2s infinite steps(8);
}

Please notice this code is prefix free, you should add them according to your needs (-moz, -webkit, -o...). Check out the Demo source to see the prefixed attributes.

The HTML

It's just this easy:

<i class="fa fa-refresh"></i>
	
<i class="fa fa-spinner"></i>

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.

*
*