<div class="loading">
    <span></span>
</div>
.loading {
  margin: 1rem 2rem;
  display: flex;
  justify-content: center;
}

span {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border-top: 1px solid violet;
  border-left: 1px solid cyan;
  border-bottom: 1px solid lime;
  border-right: 1px solid slateblue;
  animation-name: borderRotation;
  animation-duration: 2.5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

@keyframes borderRotation {
  100% {
    transform: rotateZ(1400deg);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.