import { Component } from '@angular/core';
import { WrSpinner } from 'ngwr/spinner';
@Component({ imports: [WrSpinner] })
export class MyComponent {}Spinner
An inline loading indicator.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Basic usage
<wr-spinner />Sizes
Sizes are in em, so the spinner scales with the text.
<wr-spinner size="sm" />
<wr-spinner size="md" />
<wr-spinner size="lg" />Color
The spinner takes the text colour: set color on the parent.
<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
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/spinner's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-spinner-size | 1.25em | .wr-spinner +2 variant overrides |
Dependencies
| Used by | Avatar, Badge, Button, Pull to Refresh, Table |
|---|