Progress circle
Circular determinate progress for dashboards and uploads. Arc starts at 12 o’clock.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
40%
68%
85%
<div class="row" style="align-items:center">
<div class="px-ring px-ring--sm" style="--v:40" role="progressbar" aria-valuenow="40" aria-label="Small"><svg viewBox="0 0 64 64"><circle class="px-ring__track" cx="32" cy="32" r="28"/><circle class="px-ring__fill" cx="32" cy="32" r="28"/></svg><span class="px-ring__label">40%</span></div>
<div class="px-ring" style="--v:68" role="progressbar" aria-valuenow="68" aria-label="Medium"><svg viewBox="0 0 96 96"><circle class="px-ring__track" cx="48" cy="48" r="42"/><circle class="px-ring__fill" cx="48" cy="48" r="42"/></svg><span class="px-ring__label">68%</span></div>
<div class="px-ring px-ring--lg" style="--v:85" role="progressbar" aria-valuenow="85" aria-label="Large"><svg viewBox="0 0 160 160"><circle class="px-ring__track" cx="80" cy="80" r="70"/><circle class="px-ring__fill" cx="80" cy="80" r="70"/></svg><span class="px-ring__label">85%</span></div>
</div>Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-ring · --sm · --lg | class | Size. |
--v | CSS var | Value 0–100 (no %). |
Figma properties
Progress circle16 variants · page “Charts”Open
| Property | Type | Values |
|---|---|---|
| Size | Variant | xs sm md lg |
| Shape | Variant | Circle Half circle |
| Label | Variant | False True |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-progress-track | color-surface-sunken | #f9fafb |
--px-progress-fill | color-background-brand-default | #2563eb |
--px-progress-height | 8px | 8px |
--px-progress-radius | radius-full | 999px |
--px-progress-label | color-content-neutral-primary | #101828 |
Accessibility
- role="progressbar" with aria-valuenow.