spin load tiny square

by mrjordy

HTML

<div class="circle_container">
  <div class="gradient_circle">
  </div>
</div>

CSS

.circle_container {
  margin-top: 25%;
  margin-left: 50%;
}

.gradient_circle {
    margin-top: -45px;
    margin-left: -45px;
    height: 6px;
    width: 6px;
    border-radius: 32%;
    box-shadow: 2px 2px 0 2px #ff8d00,2px -2px 0 2px #2b92ce, -2px -2px 0 2px rgb(43, 146, 206), -2px 2px 0 2px #ff8d00;
    animation: rotateThis 1s linear infinite;
}

@keyframes rotateThis {
  0% {
    transform: rotate(0) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}