Indeterminate progress bar

import { motion } from "framer-motion";

interface ProgressBarProps {
  color?: string;
  /** Grosor de la barra en px. */
  size?: number;
  /** Duración de un recorrido en segundos. */
  speed?: number;
}

export default function ProgressBar({
  color = "#0071e3",
  size = 10,
  speed = 1.6,
}: ProgressBarProps) {
  return (
    <div
      role="progressbar"
      aria-label="Loading"
      className="w-56 overflow-hidden rounded-full bg-black/5 dark:bg-white/10"
      style={{ height: size }}
    >
      <motion.div
        className="h-full rounded-full"
        style={{ backgroundColor: color }}
        initial={false}
        animate={{ x: ["-100%", "220%"] }}
        transition={{ duration: speed, repeat: Infinity, ease: "easeInOut" }}
      />
    </div>
  );
}