Spinner Component

Clarity provides a component to help with displaying a spinner for loading purposes. This component also helps with accessibility needs to announce loading tasks to a screen reader user.

Input/Output Type Default Effect
{{ prop.name }} {{ prop.type }} {{ prop.defaultValue }} {{ prop.description }}
Examples:
Loading data
Modify

Add modifier like inline or inverse. If you need to make change on the size you could add small or medium, the default size is auto set to large.

Downloading Downloading
Accessibility live region

By default the component will set aria-live='polite'. If you need to change it you need to pass assertive or off to disable the live announcement.

To prevent unwanted announcement, use *ngIf to add or remove it from the DOM. By default the component will be created with aria-live='polite' if not set otherwise. This will trigger the screen reader to announce the event in the next possible moment.

Downloading