Installation
import { WrSpinner } from 'ngwr/spinner';
@Component({ imports: [WrSpinner] })
export class MyComponent {}Basic usage
<wr-spinner />Sizes
<wr-spinner size="sm" />
<wr-spinner size="md" />
<wr-spinner size="lg" />Color
The spinner uses currentColor — set color on the parent to tint it.
<div style="color: var(--wr-color-primary)">
<wr-spinner />
</div>API
| Name | Description | Type | Default |
|---|---|---|---|
size | Size variant. Em-based — scales with surrounding font-size. | WrSpinnerSize | 'md' |
ariaLabel | Accessible name for the live region. Falls back to spinner.label, then 'Loading' — which the host used to carry as a hard-coded attribute, while the catalog had the translated key for it all along. | string | null | null |
CSS variables
Custom properties ngwr/spinner publishes. Each default below is declared on the component's own selector, so a :root override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.
| Variable | Default | Declared on |
|---|---|---|
--wr-spinner-size | 1.25em | .wr-spinner +2 variant overrides |