Spinner beta
Spinners are used to visualize a known percentage value or to represent an unspecified, indeterminate wait time.
Default
Section titled “Default”<ch-spinner></ch-spinner>Setting the label
Section titled “Setting the label”A label must be provided to ensure that assistive devices announce the progress ring properly. Use the label attribute or slot to provide a label under the progress ring. Use the default slot to add additional text.
<ch-spinner label="Loading"> <strong>Additional text slotted in</strong></ch-spinner>Label Position
Section titled “Label Position”You may set the label’s position by using the label-position attribute.
<ch-spinner label="After Position" label-position="after"></ch-spinner>Setting a custom size
Section titled “Setting a custom size”Use CSS property --spinner-ring-size to set a custom width and height.
<ch-spinner label="Loading" style="--spinner-ring-size: 16px;"></ch-spinner>