Edit in JSFiddle

<div class="container">
    <div class="spinner"></div>
</div>

.spinner {
    width: 108px;
    height: 108px;
    margin: 0 auto;
    background: url(http://f.cl.ly/items/28282K3O2i2C0G0z1Z3N/spinner.png);
    -webkit-animation: spin 1s infinite steps(12);
    animation: spin 1s infinite steps(12);
}

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

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

.container {
    background: url("http://f.cl.ly/items/3i180a0r0Y2o0420110c/clouds.jpg");
    padding: 50px;
}