JSFiddle - React, Tailwind, and code Playground

by pbatey

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css">
<div>
    <i class="fa fa-spin fa-spinner"></i>
</div>

CSS

@-webkit-keyframes spinner-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@-moz-keyframes spinner-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@-o-keyframes spinner-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@-ms-keyframes spinner-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes spinner-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.fa-spinner.fa-spin {
  -webkit-animation: spinner-spin  1s steps(8) infinite;
  -moz-animation: spinner-spin  1s steps(8) infinite;
  -o-animation: spinner-spin  1s steps(8) infinite;
  animation: spinner-spin  1s steps(8) infinite;
}