JSFiddle - React, Tailwind, and code Playground

by robertjd

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<h1 class="text-center">
    <div class="sp-icon spin"></div>
</h1>

CSS

.spin {
  -webkit-animation: spin 2s infinite linear;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
     -webkit-transform-origin: 50% 58%;
         transform-origin:50% 58%;
         -ms-transform-origin:50% 58%; /* IE 9 */
}
.sp-icon{
    width:34px;
    height:34px;
    background:url('http://d.pr/i/j2fN+');
    margin: 1em auto;
}
@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}

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

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}