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.
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
|
1 2 3 4 5 6 7 8 9 10 |
@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.
|
1 2 3 4 5 |
.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.
|
1 2 3 4 5 |
.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:
|
1 2 3 4 5 |
<i class="fa fa-refresh"></i> <i class="fa fa-spinner"></i> |