Flower Spinner

<!-- Flower Spinner -->
<div class="nuda-flower-spinner" role="status" aria-label="Loading">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

/* Flower Spinner
   Six petals appearing and disappearing in a circular pattern.
   Customize: --flower-color, --flower-petal-size */

.nuda-flower-spinner {
  --flower-color: #f472b6;
  --flower-petal-size: 10px;
  position: relative;
  width: 40px;
  height: 40px;
}

.nuda-flower-spinner span {
  position: absolute;
  width: var(--flower-petal-size);
  height: var(--flower-petal-size);
  background: var(--flower-color);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  will-change: transform, opacity;
}

.nuda-flower-spinner span:nth-child(1) {
  animation: nuda-flower-petal-0 1.8s ease-in-out infinite 0s;
  transform: translate(-50%, -50%) rotate(0deg) translateY(-14px);
}
.nuda-flower-spinner span:nth-child(2) {
  animation: nuda-flower-petal-60 1.8s ease-in-out infinite 0.15s;
  transform: translate(-50%, -50%) rotate(60deg) translateY(-14px);
}
.nuda-flower-spinner span:nth-child(3) {
  animation: nuda-flower-petal-120 1.8s ease-in-out infinite 0.3s;
  transform: translate(-50%, -50%) rotate(120deg) translateY(-14px);
}
.nuda-flower-spinner span:nth-child(4) {
  animation: nuda-flower-petal-180 1.8s ease-in-out infinite 0.45s;
  transform: translate(-50%, -50%) rotate(180deg) translateY(-14px);
}
.nuda-flower-spinner span:nth-child(5) {
  animation: nuda-flower-petal-240 1.8s ease-in-out infinite 0.6s;
  transform: translate(-50%, -50%) rotate(240deg) translateY(-14px);
}
.nuda-flower-spinner span:nth-child(6) {
  animation: nuda-flower-petal-300 1.8s ease-in-out infinite 0.75s;
  transform: translate(-50%, -50%) rotate(300deg) translateY(-14px);
}

@keyframes nuda-flower-petal-0 {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg) translateY(-14px) scale(0); opacity: 0; }
  50%      { transform: translate(-50%, -50%) rotate(0deg) translateY(-14px) scale(1); opacity: 1; }
}
@keyframes nuda-flower-petal-60 {
  0%, 100% { transform: translate(-50%, -50%) rotate(60deg) translateY(-14px) scale(0); opacity: 0; }
  50%      { transform: translate(-50%, -50%) rotate(60deg) translateY(-14px) scale(1); opacity: 1; }
}
@keyframes nuda-flower-petal-120 {
  0%, 100% { transform: translate(-50%, -50%) rotate(120deg) translateY(-14px) scale(0); opacity: 0; }
  50%      { transform: translate(-50%, -50%) rotate(120deg) translateY(-14px) scale(1); opacity: 1; }
}
@keyframes nuda-flower-petal-180 {
  0%, 100% { transform: translate(-50%, -50%) rotate(180deg) translateY(-14px) scale(0); opacity: 0; }
  50%      { transform: translate(-50%, -50%) rotate(180deg) translateY(-14px) scale(1); opacity: 1; }
}
@keyframes nuda-flower-petal-240 {
  0%, 100% { transform: translate(-50%, -50%) rotate(240deg) translateY(-14px) scale(0); opacity: 0; }
  50%      { transform: translate(-50%, -50%) rotate(240deg) translateY(-14px) scale(1); opacity: 1; }
}
@keyframes nuda-flower-petal-300 {
  0%, 100% { transform: translate(-50%, -50%) rotate(300deg) translateY(-14px) scale(0); opacity: 0; }
  50%      { transform: translate(-50%, -50%) rotate(300deg) translateY(-14px) scale(1); opacity: 1; }
}

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