:root {
  --ring-size: 200px;        /* Final size of circle */
  --ring-border: 6px;        /* Line thickness */
  --ring-color: 255,255,255; /* RGB color */
  --duration: 2s;            /* Animation speed */
}

.ring {
  position: absolute;
  top: 130px;   /* adjust to match zap centre */
  left: 70px;   /* half of 150px column */

  width: var(--ring-size);
  height: var(--ring-size);
  border-radius: 50%;
  border: var(--ring-border) solid rgba(var(--ring-color), 1);

  transform: translate(-50%, -50%) scale(0);
  animation: expandRing var(--duration) linear infinite;
}

@keyframes expandRing {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }

  20% { opacity: 1; }
  80% { opacity: 1; }

  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}