Progress

import {
  Progress,
  ProgressLabel,
  ProgressTrack,
  ProgressIndicator,
  ProgressValue,
} from "@craftdotui/baseui/components/progress";

<Progress value={60}>
  <ProgressLabel>Loading...</ProgressLabel>
  <ProgressTrack>
    <ProgressIndicator />
  </ProgressTrack>
  <ProgressValue />
</Progress>

<Progress value={75}>
  <ProgressTrack>
    <ProgressIndicator />
  </ProgressTrack>
</Progress>

<Progress value={60}>
  <ProgressLabel>Uploading file...</ProgressLabel>
  <ProgressTrack>
    <ProgressIndicator />
  </ProgressTrack>
  <ProgressValue />
</Progress>

<Progress>
  <ProgressLabel>Loading...</ProgressLabel>
  <ProgressTrack>
    <ProgressIndicator className="animate-pulse" />
  </ProgressTrack>
</Progress>

const [progress, setProgress] = useState(0);

useEffect(() => {
  const timer = setInterval(() => {
    setProgress((prev) => (prev >= 100 ? 0 : prev + 10));
  }, 500);
  return () => clearInterval(timer);
}, []);

<Progress value={progress}>
  <ProgressTrack>
    <ProgressIndicator />
  </ProgressTrack>
  <ProgressValue />
</Progress>