<img class="spinner" alt="Loading..." src="https://user-images.githubusercontent.com/35404137/143417657-5068e157-7420-4801-b9f1-eada2fdf74ba.jpg"/>
@keyframes fancy-spin {
  0% {
    transform: rotate(0turn) scale(1);
  }
  25% {
    transform: rotate(1turn) scale(1);
  }
  50% {
    transform: rotate(1turn) scale(1.5);
  }
  75% {
    transform: rotate(0turn) scale(1.5);
  }
  100% {
    transform: rotate(0turn) scale(1);
  }
}

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

.spinner {
  display: block;
  width: 32px;
  height: 32px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.