"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { cn } from "@/lib/utils";

interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
  value?: number;
  height?: number;
  stripeSize?: number;
  duration?: number;
}

function ProgressBar({
  value = 64,
  height = 10,
  stripeSize = 12,
  duration = 1.1,
  className,
  ...props
}: ProgressBarProps) {
  const clampedValue = Math.min(100, Math.max(0, value));

  return (
    <div className={cn("w-full", className)} {...props}>
      <div
        className="relative w-full overflow-hidden rounded-full border border-border bg-card"
        style={{ height }}
      >
        <motion.div
          className="relative h-full text-primary"
          style={{ width: `${clampedValue}%` }}
          initial={{ width: 0 }}
          animate={{ width: `${clampedValue}%` }}
          transition={{ duration: 0.8, ease: "easeOut" }}
        >
          <div className="absolute inset-0 rounded-full bg-current/30" />
          <motion.div
            className="absolute inset-0 rounded-full bg-[linear-gradient(45deg,currentColor_25%,transparent_25%,transparent_50%,currentColor_50%,currentColor_75%,transparent_75%,transparent)]"
            style={{ backgroundSize: `${stripeSize}px ${stripeSize}px` }}
            animate={{ backgroundPositionX: ["0%", "100%"] }}
            transition={{ duration, repeat: Infinity, ease: "linear" }}
          />
        </motion.div>
      </div>
    </div>
  );
}

export { ProgressBar };
export type { ProgressBarProps };
Progress Bar

Dependencies

Files

Installation
