Spinner im macOS-Stil

import { motion } from "framer-motion";

interface MacOSSpinnerProps {
  size?: number;
  /** Segundos por vuelta. */
  speed?: number;
}

export default function MacOSSpinner({
  size = 56,
  speed = 1,
}: MacOSSpinnerProps) {
  return (
    <div
      role="status"
      aria-label="Wird geladen"
      className="relative"
      style={{ width: size, height: size }}
    >
      {Array.from({ length: 12 }, (_, i) => (
        <motion.span
          key={i}
          className="absolute left-1/2 top-0 block rounded-full bg-[#1d1d1f] dark:bg-[#f5f5f7]"
          style={{
            width: size / 11,
            height: size / 3.4,
            marginLeft: -size / 22,
            transformOrigin: `${size / 22}px ${size / 2}px`,
            rotate: i * 30,
          }}
          animate={{ opacity: [0.16, 1, 0.16] }}
          transition={{ duration: speed, repeat: Infinity, delay: (i * speed) / 12 }}
        />
      ))}
    </div>
  );
}