#
ProgressRing
A ProgressRing is a circular progress indicator.
<UIToolbox.ProgressRing value="0.65" show-text="true" />
<UIToolbox.ProgressRing indeterminate="true" thickness="3" />
| Member |
Description |
Value (value) |
The progress, from 0 to 1. The ring fills clockwise from the top. |
Indeterminate (indeterminate) |
Spins a quarter arc, for work of unknown length. |
Animate (animate) |
Eases the arc to a new value in about 0.25 s (on). Off, the arc jumps to the value. The text always shows the new value at once. |
Thickness (thickness) |
The width of the ring in pixels (4). |
ShowText (show-text) |
Shows the percent in the center. An indeterminate ring shows no text. |
- The size comes from USS (32 px). The arc uses
color and the track uses --tb-progress-ring-track. See Styling.
- The indeterminate spin runs on the element scheduler, so it stops when the ring leaves the panel.
#Styling
| Class or property |
Element |
tb-progress-ring |
The ring. Set its width and height for the size. color is the arc color. |
--tb-progress-ring-track |
A custom property on the ring: the track color. A transparent color draws no track. |
tb-progress-ring__label |
The percent text. |
tb-progress-ring--indeterminate |
On the ring while it spins. |
