Progress ring
<oblyx-progress-ring> is the circular counterpart to progress bar: the same determinate or indeterminate progress meter, drawn as a ring instead of a bar. value, max, label, label-hidden, has-value-label, variant, indeterminate and disabled mean exactly what they mean on progress bar. This page only calls out what's different: size, the ring's diameter, and thickness, its stroke width. label is required: it is both the accessible name and the visible label text.
Basic progress ring
<oblyx-progress-ring value="60" label="Uploading"></oblyx-progress-ring>oblyxProgressRing(value = 60, label = "Uploading")Determinate versus indeterminate
Both modes render the same role="progressbar" element; the difference is entirely in which aria-value* attributes are present, exactly as on progress bar. Determinate sets aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext all together and requires value. indeterminate omits every one of them, which is how ARIA defines a progress meter whose value is unknown, not a gap in this component.
Indeterminate
<oblyx-progress-ring indeterminate label="Checking for updates"></oblyx-progress-ring>oblyxProgressRing(indeterminate = true, label = "Checking for updates")Max and value
max defaults to 100, so a plain value reads as a percentage out of the box. Set max to anything else for a meter over a different range, such as a step count.
Custom max
<oblyx-progress-ring value="3" max="5" label="Step 3 of 5" has-value-label></oblyx-progress-ring>oblyxProgressRing(value = 3, max = 5, label = "Step 3 of 5", hasValueLabel = true)Value label
has-value-label shows the resolved percentage, for example "75%", centered inside the ring rather than beside it. It's ignored when indeterminate is set, since there is no value to show.
With a value label
<oblyx-progress-ring value="75" label="Disk usage" has-value-label></oblyx-progress-ring>oblyxProgressRing(value = 75, label = "Disk usage", hasValueLabel = true)Hiding the visible label
label-hidden visually hides the label while keeping it as the accessible name, for a progress ring placed somewhere its own text label would be redundant next to surrounding copy that already says what's loading.
Visually hidden label
<oblyx-progress-ring value="40" label="Loading dashboard" label-hidden></oblyx-progress-ring>oblyxProgressRing(value = 40, label = "Loading dashboard", labelHidden = true)Variant
Fill color. accent is the default; the semantic values read as status the same way alert's do, and neutral is for a ring with no status connotation at all.
Progress ring variants
<oblyx-progress-ring value="60" label="Accent" variant="accent"></oblyx-progress-ring>
<oblyx-progress-ring value="60" label="Success" variant="success"></oblyx-progress-ring>
<oblyx-progress-ring value="60" label="Warning" variant="warning"></oblyx-progress-ring>
<oblyx-progress-ring value="60" label="Error" variant="error"></oblyx-progress-ring>
<oblyx-progress-ring value="60" label="Neutral" variant="neutral"></oblyx-progress-ring>oblyxProgressRing(value = 60, label = "Accent", variant = OblyxProgressRingVariant.ACCENT)
oblyxProgressRing(value = 60, label = "Success", variant = OblyxProgressRingVariant.SUCCESS)
oblyxProgressRing(value = 60, label = "Warning", variant = OblyxProgressRingVariant.WARNING)
oblyxProgressRing(value = 60, label = "Error", variant = OblyxProgressRingVariant.ERROR)
oblyxProgressRing(value = 60, label = "Neutral", variant = OblyxProgressRingVariant.NEUTRAL)Size
md is the default.
Progress ring sizes
<oblyx-progress-ring value="60" label="Small" size="sm" has-value-label></oblyx-progress-ring>
<oblyx-progress-ring value="60" label="Medium" size="md" has-value-label></oblyx-progress-ring>
<oblyx-progress-ring value="60" label="Large" size="lg" has-value-label></oblyx-progress-ring>
<oblyx-progress-ring value="60" label="Extra large" size="xl" has-value-label></oblyx-progress-ring>oblyxProgressRing(value = 60, label = "Small", size = OblyxProgressRingSize.SM, hasValueLabel = true)
oblyxProgressRing(value = 60, label = "Medium", size = OblyxProgressRingSize.MD, hasValueLabel = true)
oblyxProgressRing(value = 60, label = "Large", size = OblyxProgressRingSize.LG, hasValueLabel = true)
oblyxProgressRing(value = 60, label = "Extra large", size = OblyxProgressRingSize.XL, hasValueLabel = true)Thickness
regular is the default.
Progress ring thickness
<oblyx-progress-ring value="60" label="Thin" thickness="thin"></oblyx-progress-ring>
<oblyx-progress-ring value="60" label="Regular" thickness="regular"></oblyx-progress-ring>
<oblyx-progress-ring value="60" label="Thick" thickness="thick"></oblyx-progress-ring>oblyxProgressRing(value = 60, label = "Thin", thickness = OblyxProgressRingThickness.THIN)
oblyxProgressRing(value = 60, label = "Regular", thickness = OblyxProgressRingThickness.REGULAR)
oblyxProgressRing(value = 60, label = "Thick", thickness = OblyxProgressRingThickness.THICK)Disabled
disabled is a visual-only presentation; it carries no ARIA state of its own.
Disabled progress ring
<oblyx-progress-ring value="30" label="Import paused" disabled></oblyx-progress-ring>oblyxProgressRing(value = 30, label = "Import paused", disabled = true)Reference
<oblyx-progress-ring>
| Attribute | Type | Default | Description |
|---|---|---|---|
value | number | undefined | – | Current value. Ignored, and may be omitted, when indeterminate is set. Required otherwise. |
max | number | 100 | Maximum value. |
label | string | undefined | – | Accessible name and visible label text. Required. |
label-hidden | boolean | false | Visually hides the label while keeping it accessible to assistive tech. |
has-value-label | boolean | false | Shows the resolved percentage (e.g. "75%") inside the ring. Ignored when indeterminate is set, since there is no value to show. |
variant | accentsuccesswarningerrorneutral | accent | Fill color. |
indeterminate | boolean | false | Renders an indeterminate spinning arc with no value claim at all, instead of a fixed fill driven by value. |
disabled | boolean | false | Disabled, visual-only presentation. |
size | smmdlgxl | md | Ring diameter. |
thickness | thinregularthick | regular | Stroke width of the ring. |