Components
Progress
Displays an indicator showing the completion progress of a task, typically as a progress bar. Drive it with a value from 0 to 100 — uploads, multi-step flows, or any measurable task.
Preview
0%
Rendered with live Cognition tokens — the track and indicator remap on theme change, no dark: classes. The indicator slides via transition-all as the value changes.
Values
<Progress value={0} />
<Progress value={25} />
<Progress value={50} />
<Progress value={75} />
<Progress value={100} />The bar is a single track that fills left to right. At 0 it's empty; at 100 it's full.
States
0%
const [value, setValue] = useState(0);
useEffect(() => {
const t = setTimeout(() => setValue(66), 400);
return () => clearTimeout(t);
}, []);
return <Progress value={value} />;// Loop the value for an ongoing, unknown-duration task
const [value, setValue] = useState(0);
useEffect(() => {
const id = setInterval(() => setValue((v) => (v >= 100 ? 0 : v + 4)), 150);
return () => clearInterval(id);
}, []);
return <Progress value={value} />;A determinate bar reflects a known percentage. For an ongoing task with no known duration, loop the value to keep it moving — or set value={null} for an empty, indeterminate track.
API
Don't and Do
Don't freeze the bar at a fixed value while work is still happening, and don't use it for a brief, instant action — a Spinner fits better there. Keep value in step with real progress.
<Progress value={percent} className="w-full" />import { Progress } from "@/components/ui/progress";
export function UploadProgress({ percent }: { percent: number }) {
return <Progress value={percent} className="w-full" />;
}