<div class="neon-ring"></div>

.neon-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #2ecc8a;
  box-shadow:
    0 0 14px #2ecc8a,
    0 0 28px rgba(46, 204, 138, 0.35);
  animation: nring 0.9s linear infinite;
}

.neon-ring::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid transparent;
  border-bottom-color: rgba(46, 204, 138, 0.3);
  box-sizing: border-box;
}
@keyframes nring {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .neon-ring,
  .neon-ring * {
    animation: none !important;
  }
}