The Progress component displays the progress of a task or operation.
Installation
import {
Progress,
ProgressLabel,
ProgressTrack,
ProgressIndicator,
ProgressValue,
} from "@craftdotui/baseui/components/progress";
Usage
<Progress value={60}>
<ProgressLabel>Loading...</ProgressLabel>
<ProgressTrack>
<ProgressIndicator />
</ProgressTrack>
<ProgressValue />
</Progress>
Components
Progress (Root)
Current progress value (0-100).
ProgressLabel
Label describing the progress operation.
ProgressTrack
The background track.
ProgressIndicator
The filled portion showing progress.
ProgressValue
Displays the current value as text.
Examples
Basic Progress
<Progress value={75}>
<ProgressTrack>
<ProgressIndicator />
</ProgressTrack>
</Progress>
With Label and Value
<Progress value={60}>
<ProgressLabel>Uploading file...</ProgressLabel>
<ProgressTrack>
<ProgressIndicator />
</ProgressTrack>
<ProgressValue />
</Progress>
Indeterminate State
<Progress>
<ProgressLabel>Loading...</ProgressLabel>
<ProgressTrack>
<ProgressIndicator className="animate-pulse" />
</ProgressTrack>
</Progress>
Controlled 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>
Accessibility
- Built on @base-ui/react for ARIA support
- Proper role=“progressbar” attribute
- aria-valuenow, aria-valuemin, aria-valuemax
- Screen reader announcements for value changes