Segment Spinner

<!-- Segment Spinner (iOS style) -->
<div class="nuda-segspin" role="status" aria-label="Loading">
  <span style="transform:rotate(0deg)   translateY(-14px);animation-delay:0s"></span>
  <span style="transform:rotate(45deg)  translateY(-14px);animation-delay:.1s"></span>
  <span style="transform:rotate(90deg)  translateY(-14px);animation-delay:.2s"></span>
  <span style="transform:rotate(135deg) translateY(-14px);animation-delay:.3s"></span>
  <span style="transform:rotate(180deg) translateY(-14px);animation-delay:.4s"></span>
  <span style="transform:rotate(225deg) translateY(-14px);animation-delay:.5s"></span>
  <span style="transform:rotate(270deg) translateY(-14px);animation-delay:.6s"></span>
  <span style="transform:rotate(315deg) translateY(-14px);animation-delay:.7s"></span>
</div>

/* Segment Spinner
   Eight segments fading in sequence around a circle (iOS-style).
   Each segment is positioned via an inline transform; opacity is animated.
   Customize: --segspin-color */

.nuda-segspin {
  --segspin-color: #e4ff54;
  position: relative;
  width: 36px;
  height: 36px;
}

.nuda-segspin span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 9px;
  margin: -4.5px -1.5px;
  border-radius: 2px;
  background: var(--segspin-color);
  transform-origin: center;
  animation: nuda-segspin 0.8s linear infinite;
  will-change: opacity;
}

@keyframes nuda-segspin {
  0%   { opacity: 1; }
  100% { opacity: 0.15; }
}

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