Progress
@/components/kamod-ui/progress
Installation
Import Progress from `@/components/kamod-ui/progress`.
pnpm add @kamod-ch/uiUsage
Pass value and optional max for determinate progress. Use value={null} or indeterminate for loading when completion is unknown — the indeterminate animation is injected once with the component (no extra Tailwind keyframes). Pair with labels, or drive value from a Slider for interactive demos.
import { Progress } from "@/components/kamod-ui/progress";<Progress />Basic
Minimal bar with theme tokens and smooth motion, similar to the default on the shadcn/ui Progress docs.
Label
Pair the bar with a title and numeric readout so status stays clear at a glance.
Controlled
Bind progress to a Slider so users can scrub the value — the same interaction model as the shadcn/ui controlled example.
Indeterminate
When completion cannot be measured, use null or the indeterminate flag — same idea as Radix Progress with an unknown value.
Custom max
Use max when progress is not a percentage — steps, file counts, or queue length.
API Reference
Props, slots and variants for this component.
Progress
Progress component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| value | number | null | 0 |
| max | number | 100 |
| indeterminate | boolean | undefined |
| class | string | undefined |
| indicatorClass | string | undefined |
Accessibility Notes
For determinate bars, pair with a visible label or aria-label. Indeterminate mode omits aria-valuenow and sets aria-valuetext (override via props). Prefer reduced-motion: animation stops when the user requests it.