<div class="loader">
  <span class="loader__inner"></span>
  <span class="loader__inner"></span>
</div>

:root {
  --size: 140px;
  --speed: 5s;
}

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #ecf0f1;
}

.loader {
  width: var(--size);
  height: var(--size);
}

.loader__inner {
  position: absolute;
  display: block;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  box-shadow: 
    0 -10px 0 0 rgba(0,77,64, .6),
    -7.5px 5px 0 0 rgba(0,121,107, .6),
    7.5px 5px 0 0 rgba(0,150,136, .6);
  animation: rotate var(--speed) linear infinite;
}
.loader__inner:nth-child(2) {
  box-shadow: 
    7.5px -5px 0 0 rgba(49,27,146, .6),
    -7.5px -5px 0 0 rgba(81,45,168, .6),
    0 10px 0 0 rgba(103,58,183, .6);
  animation: rotate__other var(--speed) linear infinite;
}
@keyframes rotate {
  50% {
    transform: scale(1.4) rotate(360deg);
  }
  100% {
    transform: scale(1) rotate(720deg);
  }
}

@keyframes rotate__other {
  50% {
    transform: scale(1.5) rotate(-360deg);
  }
  100% {
    transform: scale(1) rotate(-720deg);
  }
}