spinner-stepped-01

by Nic Fontaine

HTML

<script async src="https://use.fontawesome.com/dfe288b4db.js"></script>

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

CSS

i.fa {
  font-size: 50px;
  animation: spinner 0.5s linear infinite;
  animation-fill-mode: forwards;
}

@keyframes spinner {
  0% { transform: rotate(0deg); }
  12.49% { transform: rotate(0deg); }
  
  12.5% { transform: rotate(45deg); }
  24.99% { transform: rotate(45deg); }
  
  25% { transform: rotate(90deg); }
  37.49% { transform: rotate(90deg); }
  
  37.5% { transform: rotate(135deg); }
  49.99% { transform: rotate(135deg); }
  
  50% { transform: rotate(180deg); }
  62.49% { transform: rotate(180deg); }
  
  62.5% { transform: rotate(225deg); }
  74.99% { transform: rotate(225deg); }
  
  75%  { transform: rotate(270deg); }
  87.49%  { transform: rotate(270deg); }
  
  87.5%  { transform: rotate(315deg); }
  100%  { transform: rotate(315deg); }
}