Progress Ring
Circular progress indicator in SVG: the fill arc is controlled by stroke-dashoffset and the percentage appears in the center of the ring. Use it to represent determinate progress from 0 to 100 (uploads, steps, metrics), or add the indeterminate attribute for a spinner of unknown progress. The agent-native layer exposes data-pura-ring-* attributes that mirror the live state (value, state, size, thickness), and each instance registers itself in window.__puraProgressRings indexed by data-pura-id, letting an agent enumerate and read all rings without traversing the DOM.
Preview
<div style="display:flex;gap:24px;align-items:center;flex-wrap:wrap">
<pura-progress-ring id="upload" value="35" size="96" thickness="8" label="Upload progress"></pura-progress-ring>
<pura-progress-ring indeterminate size="96" thickness="8" label="Loading"></pura-progress-ring>
<button id="avancar" type="button">Advance 10%</button>
</div>
<script type="module">
import "/pura/lib/progress-ring.js";
const ring = document.getElementById("upload");
document.getElementById("avancar").addEventListener("click", () => {
ring.value = Math.min(100, ring.value + 10);
});
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Progress from 0 to 100 (clamped). Ignored when indeterminate. |
size | number | 64 | Ring diameter in px. A plain number or a px value. |
thickness | number | 6 | Stroke width in px, capped at half the size. |
indeterminate | boolean | false | Spins continuously and hides the percentage label (unknown progress). |
label | string | "<value> percent" | Overrides the accessible name (aria-label). |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/progress-ring.js"></script>import "./pura/lib/progress-ring.js";