Dots Circle

<!-- Dots Circle Spinner -->
<div class="nuda-dotscircle" role="status" aria-label="Loading">
  <span style="transform:rotate(0deg)   translateY(-15px);animation-delay:0s"></span>
  <span style="transform:rotate(45deg)  translateY(-15px);animation-delay:.125s"></span>
  <span style="transform:rotate(90deg)  translateY(-15px);animation-delay:.25s"></span>
  <span style="transform:rotate(135deg) translateY(-15px);animation-delay:.375s"></span>
  <span style="transform:rotate(180deg) translateY(-15px);animation-delay:.5s"></span>
  <span style="transform:rotate(225deg) translateY(-15px);animation-delay:.625s"></span>
  <span style="transform:rotate(270deg) translateY(-15px);animation-delay:.75s"></span>
  <span style="transform:rotate(315deg) translateY(-15px);animation-delay:.875s"></span>
</div>

/* Dots Circle Spinner
   Dots arranged in a circle, scaling up/down in sequence.
   NOTE: each dot's circular position comes from the inline transform;
   the keyframe only animates scale so positions are preserved.
   Customize: --dotscircle-color */

.nuda-dotscircle {
  --dotscircle-color: #e4ff54;
  position: relative;
  width: 40px;
  height: 40px;
}

.nuda-dotscircle span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px;
  border-radius: 50%;
  background: var(--dotscircle-color);
  animation: nuda-dotscircle 1s ease-in-out infinite;
  will-change: transform;
}

@keyframes nuda-dotscircle {
  0%, 100% { transform: scale(0.3); }
  50%      { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-dotscircle span { animation: none; opacity: 0.5; }
}