Progress
progressDisplays determinate or indeterminate progress in linear or circular form.
Usage
Basic usage
Pass in value (default max=100) to fill the progress bar according to the percentage.
tsx
<Progress value={40} className="w-64" />Show percentage
showValue Displays a percentage label to the right of the progress bar.
60%
tsx
<Progress value={60} showValue className="w-64" />Hue
tone switches primary / success / warning / danger four semantic colors.
40%
70%
85%
95%
tsx
<>
<Progress value={40} tone="primary" showValue className="w-64" />
<Progress value={70} tone="success" showValue className="w-64" />
<Progress value={85} tone="warning" showValue className="w-64" />
<Progress value={95} tone="danger" showValue className="w-64" />
</>Ring Progress
variant="circular" renders the ring, showValue displays the percentage in the center.
75%
tsx
<Progress variant="circular" value={75} showValue />Indeterminate state
Omit value (undefined) and enter the loading unsteady state, with both linear and circular animations looping.
tsx
<>
<Progress className="w-64" />
<Progress variant="circular" />
</>When to use
Use Progress for a measurable task with value and max, such as upload, form completion, or quota use, or omit value for indeterminate loading. Use Spin or Spinner when only a busy state is known.
Import
ts
import { Progress, progressPercent, dashOffset } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| value | number | — | Current value. Omit or pass undefined for indeterminate mode. |
| max | number | 100 | Maximum value. |
| variant | "linear" | "circular" | "linear" | Geometry. |
| tone | "primary" | "danger" | "success" | "warning" | "primary" | Progress tone. |
| size | number | 40 | Circular diameter in pixels; ignored by linear. |
| thickness | number | 4 | Circular stroke width in pixels; ignored by linear. |
| showValue | boolean | false | Shows the percentage at the circular center or linear right edge; ignored when indeterminate. |
InheritsHTMLAttributes<HTMLDivElement>. Give the linear variant a width, such asclassName="w-64".
Example
tsx
<Progress value={60} showValue className="w-64" />
<Progress variant="circular" value={75} showValue />
<Progress className="w-64" /> {/* Indeterminate: value omitted */}Usage guidelines
- The circular SVG ring begins at 12 o'clock using the SVG
transform="rotate(…)"attribute, not CSS transform. When changing geometry, see [[svg-circular-progress-ring-rotate-via-svg-attr-not-css]]; CSS transform-origin does not behave reliably on SVG geometry elements. showValuehas no effect in indeterminate mode because no percentage exists.
Related
Playground
<Progress value={40} />