<img class="spinner" alt="Loading..." src="https://user-images.githubusercontent.com/35404137/143417657-5068e157-7420-4801-b9f1-eada2fdf74ba.jpg"/>
<img class="multi-step-spinner" alt="Loading..." src="https://user-images.githubusercontent.com/35404137/143417657-5068e157-7420-4801-b9f1-eada2fdf74ba.jpg"/>
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  height: calc(100vh - 16px);
}

.spinner, .multi-step-spinner {
  display: block;
  width: 32px;
  height: 32px;
}

@keyframes spin {
  0% {
    transform: rotate(0turn);
  }
  100% {
    transform: rotate(1turn);
  }
}

@keyframes multi-step-spin {
  0% {
    transform: rotate(0turn);
  }
  25% {
    transform: rotate(0.25turn);
  }
  50% {
    transform: rotate(0.5turn);
  }
  75% {
    transform: rotate(0.75turn);
  }
  100% {
    transform: rotate(1turn);
  }
}

.spinner {
  animation: spin 2000ms;
  animation-iteration-count: infinite;
}

.multi-step-spinner {
  animation: multi-step-spin 2000ms;
  animation-iteration-count: infinite;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.