CSS: progress-circle
.instui-progress-circle — A circular progress ring driven by a --value (0–100) custom property.
The ring is a conic-gradient donut painted on ::before and clipped with a radial-gradient mask; the --value custom property drives the arc.
Source: progress-circle.css
Accessibility
Give it role="img" and an aria-label stating the percentage, since the ring is drawn in CSS.
Usage
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/progress-circle.css";Examples
html
<span class="instui-progress-circle -size-sm" role="img" aria-label="25 percent">
<span class="value">25%</span>
</span>25%
Modifiers
| Modifier | Description |
|---|---|
.-color-brand | Brand meter colour. |
.-color-danger | Danger meter colour. |
.-color-info | Informational meter colour. |
.-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 |
|---|---|
.value | The value text centred in the ring's hole. |
Pseudo-elements
| Pseudo-element | Description |
|---|---|
::before | Draws the ring itself: a conic-gradient donut clipped with a radial mask, whose arc tracks the --value custom property. |
Custom properties
| Property | Type | Default | Description |
|---|---|---|---|
--pantoken-pc-fill | <color> | — | The filled arc (meter) colour; the -color-* modifiers set it. |
--pantoken-pc-stroke | <length> | — | The ring's stroke width; the -size-* modifiers set it. |
--pantoken-pc-track | <color> | — | The unfilled track colour. |
--value | <number> | 0 | The progress percentage (0–100) that drives the arc; registered with @property so it can transition. |
Tokens consumed
| Token | Type | Value |
|---|---|---|
--instui-component-progress-circle-color | <color> | light-dark(#273540, #ffffff)LightDark |
--instui-component-progress-circle-color-inverse | <color> | light-dark(#ffffff, #1C222B)LightDark |
--instui-component-progress-circle-font-family | [ <font-family-name> | <generic-font-family> ]# | Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif |
--instui-component-progress-circle-font-weight | <integer> | 600 |
--instui-component-progress-circle-large-size | <length> | 9em |
--instui-component-progress-circle-large-stroke-width | <length> | 0.875em |
--instui-component-progress-circle-line-height | <percentage> | 125% |
--instui-component-progress-circle-medium-size | <length> | 7em |
--instui-component-progress-circle-medium-stroke-width | <length> | 0.625em |
--instui-component-progress-circle-meter-color-brand | <color> | light-dark(#1D354F, #EEF4FD)LightDark |
--instui-component-progress-circle-meter-color-brand-inverse | <color> | light-dark(#ffffff, #6A7883)LightDark |
--instui-component-progress-circle-meter-color-danger | <color> | #E62429 |
--instui-component-progress-circle-meter-color-danger-inverse | <color> | light-dark(#ffffff, #6A7883)LightDark |
--instui-component-progress-circle-meter-color-info | <color> | #2B7ABC |
--instui-component-progress-circle-meter-color-info-inverse | <color> | light-dark(#ffffff, #6A7883)LightDark |
--instui-component-progress-circle-meter-color-success | <color> | #03893D |
--instui-component-progress-circle-meter-color-success-inverse | <color> | light-dark(#ffffff, #6A7883)LightDark |
--instui-component-progress-circle-meter-color-warning | <color> | #CF4A00 |
--instui-component-progress-circle-meter-color-warning-inverse | <color> | light-dark(#ffffff, #6A7883)LightDark |
--instui-component-progress-circle-small-size | <length> | 5em |
--instui-component-progress-circle-small-stroke-width | <length> | 0.5em |
--instui-component-progress-circle-track-color | <color> | light-dark(#ffffff, #10141A)LightDark |
--instui-component-progress-circle-track-color-inverse | <color> | #00000000 |
--instui-component-progress-circle-x-small-size | <length> | 3em |
--instui-component-progress-circle-x-small-stroke-width | <length> | 0.2em |
Browser support
- Registers
--valuewith@property(so the arc can transition) and paints with CSSmaskandconic-gradient; where@propertyis unsupported the ring still renders but won't animate.
Related
- progress — The linear bar form of the same determinate progress.