CSS loading spinner

index.html

<div id="wrapper">
  <span class="spinner"></span>
  <span class="pulser"></span>
  <span class="doublespinner"></span>
  <span class="ball"></span>
</div>

<style type="text/css">
body {
  background: #333;
}

#wrapper {
  width: 90%;
  min-width: 600px;
  min-height: 1px;
  margin: 50px auto;
}
/* SPINNER */

.spinner {
  margin: 30px;
  display: block;
  float: left;
  border: 25px solid #fff;
  width: 1px;
  height: 1px;
  border-radius: 25px;
  border-left-color: transparent;
  border-right-color: transparent;
  animation-name: spin;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes spin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(720deg) scale(0.6); -webkit-filter: blur(3px); }
  100% { transform: rotate(0deg) scale(1); }
}
  
</style>