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 }}
Deprecation: Since v4, we will no longer handle setting aria-live and announcing the message for you by default. Based on the application use case, you can use the new ClrAriaLiveService to make announcements when they make sense for a user to hear about updates or loading status changes. This will result in of removing few inputs provided by the component such as clrPolite, clrAssertive, clrOff
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