forked from 77media/video-flow
26 lines
834 B
TypeScript
26 lines
834 B
TypeScript
import React from "react";
|
|
import { motion } from "framer-motion";
|
|
|
|
interface ProgressBarProps {
|
|
value: number;
|
|
total?: number;
|
|
label?: string;
|
|
}
|
|
|
|
export function ProgressBar({ value, total = 100, label }: ProgressBarProps) {
|
|
const pct = Math.max(0, Math.min(100, Math.round((value / total) * 100)));
|
|
return (
|
|
<div className="my-2" data-alt="progress-bar">
|
|
{label ? <div className="mb-1 text-xs opacity-80">{label}</div> : null}
|
|
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1 overflow-hidden">
|
|
<motion.div
|
|
className="h-1 bg-[#6fd0d3] rounded-full"
|
|
initial={{ width: 0 }}
|
|
animate={{ width: `${pct}%` }}
|
|
transition={{ duration: 0.5 }}
|
|
/>
|
|
</div>
|
|
<div className="text-[10px] mt-1 opacity-70">{pct}%</div>
|
|
</div>
|
|
);
|
|
} |