JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<p>external ressources - http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css</p>
<i class="fa fa-5x fa-spinner fa-spin"></i>
<p>is it better?</p>
<i class="fa fa-5x fa-spinner fa-spin-new"></i>
CSS
body{
font-family:sans-serif;
}
.fa-spin-new {
-webkit-animation: spin 0.8s steps(8) infinite;
-moz-animation: spin 0.8s steps(8) infinite;
-o-animation: spin 0.8s steps(8) infinite;
animation: spin 0.8s steps(8) infinite;
}