.dot-spinner {
  position: relative;
  display: inline-block;
  width: 96px;
  height: 96px;
}

.dot-spinner svg {
  transform-origin: 50% 50%;
  animation: rotate 2s linear infinite;
}

.dot-spinner circle {
  fill: #58c927;
  animation: pulse 1.5s ease-in-out infinite;
}

.dot-spinner #dot-1 {
  animation-delay: 0s;
}

.dot-spinner #dot-2 {
  animation-delay: 0.15s;
}

.dot-spinner #dot-3 {
  animation-delay: 0.3s;
}

.dot-spinner #dot-4 {
  animation-delay: 0.45s;
}

.dot-spinner #dot-5 {
  animation-delay: 0.6s;
}

.dot-spinner #dot-6 {
  animation-delay: 0.75s;
}

.dot-spinner #dot-7 {
  animation-delay: 0.9s;
}

.dot-spinner #dot-8 {
  animation-delay: 1.05s;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}