Progress
stable 1.1 kB<hk-progress>Linear and circular off the same value, plus an indeterminate mode for when there is genuinely no percentage to report.
#loading#bar
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| value | number | 0 | Percentage, 0–100. |
| variant | 'linear' | 'circular' | 'linear' | Shape. |
| indeterminate | boolean | false | Unknown duration; ignores value. |
| label | string | '' | Accessible name for the bar. |
| showValue | boolean | false | Renders the percentage next to the bar. |
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-progress-track | rgb(15 23 42 / 0.10) | Unfilled track. |
| --hk-progress-fill | linear-gradient(90deg, #dc2626, #991b1b) | Filled portion. |
| --hk-progress-height | 0.5rem | Bar thickness. |
Accessibility
- role="progressbar" with aria-valuenow, and those attributes omitted entirely when indeterminate — which is how a screen reader knows the duration is unknown.
- The label is required for a bare bar; without one the control has no accessible name.