Spinner without 12 divs

gistfile1.txt

<div class="spinner">

.spinner {
  margin: 12px;
  width: 28px;
  height: 28px;
  animation: spinner-rotating 1.2s infinite;
  animation-timing-function: steps(12, end);
}
.spinner:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  margin: 0;
  margin-left: 12px;
  border-radius: 50%;
  background: #888;
  color: #ccc;
  box-shadow:
    6px 1.61px,
    10.39px 6px,
    12px 12px,
    10.39px 18px,
    6px 22.39px,
    0 24px,
    -6px 1.61px #999,
    -10.39px 6px #aaa,
    -12px 12px #bbb,
    -10.39px 18px,
    -6px 22.39px;
}
@keyframes spinner-rotating {
  from { transform: rotate(0deg) }
  to { transform: rotate(360deg) }
}