CSS: progress
.instui-progress — A determinate progress bar with a coloured meter, sizes, and an optional value label.
The value label is a separate sibling element (.instui-progress-value), not a child of the bar.
Source: progress.css
Accessibility
Expose progress via role="progressbar" with aria-valuenow, aria-valuemin, and aria-valuemax (or role="img" plus aria-label), mirroring how progress-circle is labelled.
Usage
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/progress.css";Examples
html
<div class="instui-progress -color-brand">
<div class="bar"></div>
</div>Modifiers
| Modifier | Description |
|---|---|
.-color-brand | Brand meter colour. |
.-color-danger | Danger meter colour. |
.-color-info | Informational meter colour. |
.-color-inverse | For dark backgrounds. |
.-color-primary-inverse | On-dark (primary inverse) meter colour. |
.-color-success | Success meter colour. |
.-color-warning | Warning meter colour. |
.-meter-color-alert | Deprecated — use .-color-warning. |
.-meter-color-brand | Deprecated — use .-color-brand. |
.-meter-color-danger | Deprecated — use .-color-danger. |
.-meter-color-info | Deprecated — use .-color-info. |
.-meter-color-success | Deprecated — use .-color-success. |
.-meter-color-warning | Deprecated — use .-color-warning. |
.-size-large | Large. Long-form alias of -size-lg. |
.-size-lg | Large. |
.-size-sm | Small. |
.-size-small | Small. Long-form alias of -size-sm. |
.-size-x-small | Extra small. Long-form alias of -size-xs. |
.-size-xs | Extra small. |
Parts
| Part | Description |
|---|---|
.bar | The filled meter bar. |
Pseudo-elements
| Pseudo-element | Description |
|---|---|
::after | Draws the track's bottom rule as its own layer over the meter, so the full border and the bottom border stay independent across themes. |
Tokens consumed
| Token | Type | Value |
|---|---|---|
--instui-color-background-brand | <color> | light-dark(#1D354F, #EEF4FD)LightDark |
--instui-color-background-error | <color> | #E62429 |
--instui-color-background-info | <color> | #2B7ABC |
--instui-color-background-success | <color> | #03893D |
--instui-color-background-warning | <color> | #CF4A00 |
--instui-component-progress-bar-border-color | <color> | light-dark(#1D354F, #EEF4FD)LightDark |
--instui-component-progress-bar-border-color-inverse | <color> | light-dark(#ffffff, #6A7883)LightDark |
--instui-component-progress-bar-border-radius | <length> | 0.5rem |
--instui-component-progress-bar-font-family | [ <font-family-name> | <generic-font-family> ]# | Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif |
--instui-component-progress-bar-font-weight | <integer> | 400 |
--instui-component-progress-bar-large-height | <length> | 2rem |
--instui-component-progress-bar-line-height | <percentage> | 125% |
--instui-component-progress-bar-medium-height | <length> | 1.5rem |
--instui-component-progress-bar-medium-value-font-size | <length> | 1rem |
--instui-component-progress-bar-meter-color-brand-inverse | <color> | light-dark(#ffffff, #10141A)LightDark |
--instui-component-progress-bar-small-height | <length> | 1rem |
--instui-component-progress-bar-text-color | <color> | light-dark(#576773, #AAB0B5)LightDark |
--instui-component-progress-bar-text-color-inverse | <color> | light-dark(#ffffff, #1C222B)LightDark |
--instui-component-progress-bar-track-bottom-border-color | <color> | #00000000 |
--instui-component-progress-bar-track-bottom-border-color-inverse | <color> | #00000000 |
--instui-component-progress-bar-track-bottom-border-width | <length> | 0.0625rem |
--instui-component-progress-bar-track-color | <color> | #00000000 |
--instui-component-progress-bar-track-color-inverse | <color> | #00000000 |
--instui-component-progress-bar-value-padding | <length> | 0.5rem |
--instui-component-progress-bar-x-small-height | <length> | 0.5rem |
Browser support
- Scopes the meter part rules with the
@scopeat-rule; browsers without@scopesupport ignore those scoped rules.
Related
- progress-circle — The circular form of the same determinate progress.