Анимированный индикатор загрузки на CSS

Простой и футуристический лоадер, он же индикатор загрузки на чистом css. Используем простейшую анимацию.

Демо

Код индикатора загрузки

<style>
.loader-wrapper {
  width: 60px;
  height: 60px;
}

.loader {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 10px solid #162534;
  border-top-color: #4bc8eb;
  border-bottom-color: #f13a8f;
  border-radius: 50%;
  animation: rotate 5s linear infinite;
}

.loader-inner {
  border-top-color: #36f372;
  border-bottom-color: white;
  animation-duration: 2s;
}

.loader-wrapper-bg {
  background: black;
  padding: 20px;
}

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

</style>
<div class="loader-wrapper-bg">
  <div class="loader-wrapper">
    <div class="loader">
      <div class="loader loader-inner"></div>
    </div>
  </div>
</div>

Скорость анимации меняем в зависимости от желаемого эффекта.