Потрійний спінер

<div class="triple-spinner">
  <span class="triple-spinner__ring triple-spinner__ring_outer"></span>
  <span class="triple-spinner__ring triple-spinner__ring_middle"></span>
  <span class="triple-spinner__ring triple-spinner__ring_inner"></span>
</div>

<style>
.triple-spinner {
  position: relative;
  width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
  color: #5b8def;
}

.triple-spinner__ring {
  position: absolute;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #5b8def;
  border-right-color: rgba(91, 141, 239, 0.5);
  border-left-color: rgba(99, 173, 255, 0.4);
  box-shadow: 0 0 18px rgba(91, 141, 239, 0.25);
}

.triple-spinner__ring_outer { width: 100%; height: 100%; animation: triple-spin 1.6s linear infinite; }
.triple-spinner__ring_middle { width: 78%; height: 78%; animation: triple-spin 1.2s linear infinite reverse; }
.triple-spinner__ring_inner { width: 52%; height: 52%; animation: triple-spin 0.9s linear infinite; }

@keyframes triple-spin { to { transform: rotate(360deg); } }
</style>