spin load

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: 90px;
  width: 90px;
  border-radius: 100%;
  box-shadow: 1px 1px 0 0 rgba(255, 0, 0, .4), -1px -1px 0 0 rgba(135, 206, 235, .8);
  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);
  }
}