Design System
Progress
Progress indicators show the completion status of a task or process. They provide visual feedback for long-running operations.
Basic Usage
Progress indicators display a value between 0 and 100 percent.
Progress Bar
States
Progress indicators can show different completion states.
0%
33%
66%
100%
Animated
Progress indicators can animate smoothly when values change.
Animated Progress
Usage
import { Progress } from "@/components/ui/progress";
import { useState, useEffect } from "react";
export function MyComponent() {
const [progress, setProgress] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setProgress((prev) => (prev >= 100 ? 0 : prev + 1));
}, 100);
return () => clearInterval(timer);
}, []);
return <Progress value={progress} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Current progress value |
max | number | 100 | Maximum progress value |
Material 3 Features
- Surface Container: Uses surface-container-highest for background
- Primary Color: Uses primary color for progress indicator
- Animation: Smooth transitions using motion tokens
- Shape: Full border radius for rounded appearance