Fortschrittsbalken mit Glanz

import { motion } from "framer-motion";

interface ShineProgressProps {
  color?: string;
  /** Progreso de 0 a 100. */
  progress?: number;
  /** Segundos que tarda el reflejo en cruzar. */
  speed?: number;
}

export default function ShineProgress({
  color = "#0071e3",
  progress = 68,
  speed = 1.5,
}: ShineProgressProps) {
  return (
    <div
      role="progressbar"
      aria-valuenow={progress}
      aria-valuemin={0}
      aria-valuemax={100}
      className="h-1.5 w-64 overflow-hidden rounded-full bg-black/5 dark:bg-white/10"
    >
      <motion.div
        className="relative h-full rounded-full"
        style={{ width: `${progress}%`, backgroundColor: color }}
        animate={{ width: `${progress}%` }}
        transition={{ type: "spring", stiffness: 300, damping: 30 }}
      >
        <motion.span
          className="absolute inset-y-0 w-16 bg-gradient-to-r from-transparent via-white/50 to-transparent"
          animate={{ x: [-70, 260] }}
          transition={{ duration: speed, repeat: Infinity, ease: "linear" }}
        />
      </motion.div>
    </div>
  );
}