Spinner
A CSS-only animated loading indicator. Communicates asynchronous activity to both sighted users and screen readers via role="status" and an accessible label.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Controls the diameter of the spinner ring. sm = 14px, md = 16px, lg = 20px. |
label | string | 'Loading' | Accessible label announced by screen readers via aria-label on the host. Override with a specific description of the operation in progress. |
Events
diwa-spinner is a stateless display component and emits no events.
Slots
diwa-spinner has no slots. All configuration is done via props.
CSS Custom Properties
| Property | Description |
|---|---|
--diwa-spinner-size-sm | Diameter of the spinner ring at the sm size tier. Defaults to 14px. |
--diwa-spinner-size-md | Diameter of the spinner ring at the md size tier. Defaults to 16px. |
--diwa-spinner-size-lg | Diameter of the spinner ring at the lg size tier. Defaults to 20px. |
--diwa-spinner-color | Spinner stroke colour. Defaults to currentColor — inherits the surrounding text colour. |