<svg class="spinning-dots" viewBox="0 0 100 100">
    <circle cx="50" cy="20" r="4" fill="#3498db" />
    <circle cx="67.32" cy="25.98" r="4" fill="#3498db" />
    <circle cx="78.66" cy="41.34" r="4" fill="#3498db" />
    <circle cx="80" cy="60" r="4" fill="#3498db" />
    <circle cx="67.32" cy="74.02" r="4" fill="#3498db" />
    <circle cx="50" cy="80" r="4" fill="#3498db" />
    <circle cx="32.68" cy="74.02" r="4" fill="#3498db" />
    <circle cx="20" cy="60" r="4" fill="#3498db" />
  </svg>
  <h3>Spinning Dots</h3>

body {
  display: flex;
  background: #e7e7e7;
  justify-content: center;
  align-items:center;
  min-height: 100vh;
}

svg {
  width: 100px;
  height: 100px;
}
@keyframes spinAround {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes opacity {
  0%,
  100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}
.spinning-dots {
  animation: spinAround 3s linear infinite;
}
.spinning-dots circle {
  animation: opacity 1.2s ease-in-out infinite;
}

.spinning-dots circle:nth-child(2) {
  animation-delay: 0.1s;
}
.spinning-dots circle:nth-child(3) {
  animation-delay: 0.2s;
}
.spinning-dots circle:nth-child(4) {
  animation-delay: 0.3s;
}
.spinning-dots circle:nth-child(5) {
  animation-delay: 0.4s;
}
.spinning-dots circle:nth-child(6) {
  animation-delay: 0.5s;
}
.spinning-dots circle:nth-child(7) {
  animation-delay: 0.6s;
}
.spinning-dots circle:nth-child(8) {
  animation-delay: 0.7s;
}


h3 {
  padding: 30px;
}