Orbit Pulse Loader

<!--
  Author: @just90
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="spin-wrap">
  <div class="spin-track"></div>
  <div class="spin-dot"></div>
  <div class="spin-dot"></div>
  <div class="spin-dot"></div>
</div>

/*
 * Author: @just90
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.spin-wrap {
  position: relative;
  width: 90px;
  height: 90px;
}

.spin-track {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px dashed rgba(64, 224, 208, 0.25);
}

.spin-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px;
  border-radius: 50%;
  background: #40e0d0;
  box-shadow: 0 0 12px 2px rgba(64, 224, 208, 0.6);
  animation: orbit-path 1.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.spin-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #e6e6e6;
  opacity: 0;
  animation: dot-fade 1.4s ease-in-out infinite;
}

.spin-dot:nth-child(2) { animation-delay: 0.15s; }
.spin-dot:nth-child(3) { animation-delay: 0.30s; }

@keyframes orbit-path {
  0% {
    transform: rotate(0deg) translateX(35px) rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) translateX(35px) rotate(-180deg) scale(0.6);
  }
  100% {
    transform: rotate(360deg) translateX(35px) rotate(-360deg) scale(1);
  }
}

@keyframes dot-fade {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}