stepped animation

by Soviut

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32" class="pd-loading__spinner pd-icon--spin pd-icon--2x">
    <path d="M9.393 24.893q0 0.946-0.67 1.616t-1.616 0.67q-0.929 0-1.607-0.679t-0.679-1.607q0-0.946 0.67-1.616t1.616-0.67 1.616 0.67 0.67 1.616zM18.286 28.571q0 0.946-0.67 1.616t-1.616 0.67-1.616-0.67-0.67-1.616 0.67-1.616 1.616-0.67 1.616 0.67 0.67 1.616zM5.714 16q0 0.946-0.67 1.616t-1.616 0.67-1.616-0.67-0.67-1.616 0.67-1.616 1.616-0.67 1.616 0.67 0.67 1.616zM27.179 24.893q0 0.929-0.679 1.607t-1.607 0.679q-0.946 0-1.616-0.67t-0.67-1.616 0.67-1.616 1.616-0.67 1.616 0.67 0.67 1.616zM9.964 7.107q0 1.179-0.839 2.018t-2.018 0.839-2.018-0.839-0.839-2.018 0.839-2.018 2.018-0.839 2.018 0.839 0.839 2.018zM30.857 16q0 0.946-0.67 1.616t-1.616 0.67-1.616-0.67-0.67-1.616 0.67-1.616 1.616-0.67 1.616 0.67 0.67 1.616zM19.429 3.429q0 1.429-1 2.429t-2.429 1-2.429-1-1-2.429 1-2.429 2.429-1 2.429 1 1 2.429zM28.893 7.107q0 1.661-1.179 2.83t-2.821 1.17q-1.661 0-2.83-1.17t-1.17-2.83q0-1.643 1.17-2.821t2.83-1.179q1.643 0 2.821 1.179t1.179 2.821z"></path>
</svg>

CSS

svg {
  animation: spin-stepped 1s steps(8, end) infinite;
}

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