.dz-dots-curve {
  position: relative;
  width: 300px;    /* adjust size */
  height: 120px;   /* curve height */
}

.dz-dots-curve span {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #A3A3A3;
  border-radius: 50%;
  opacity: 0;

  /* place dot on the curve */
  left: var(--x);
  top: var(--y);

  /* animation */
  animation: dotCurveFade 2s infinite ease-in-out;
}

/* stagger fade timing */
.dz-dots-curve span:nth-child(1) { animation-delay: 0.0s; }
.dz-dots-curve span:nth-child(2) { animation-delay: 0.15s; }
.dz-dots-curve span:nth-child(3) { animation-delay: 0.30s; }
.dz-dots-curve span:nth-child(4) { animation-delay: 0.45s; }
.dz-dots-curve span:nth-child(5) { animation-delay: 0.60s; }
.dz-dots-curve span:nth-child(6) { animation-delay: 0.75s; }
.dz-dots-curve span:nth-child(7) { animation-delay: 0.90s; }

@keyframes dotCurveFade {
  0%   { opacity: 0; }
  40%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}