Spinner
Spinner
Resources
Spinner is a visual representation of a process taking an indeterminate time to complete. Triggers include automated system processes, a user action or an indicator of content loading. Displaying a spinner reassures the user that the system is still working, especially when the operation takes longer than one second.
Examples
How to use
Accessibility
- Improve accessibility by customizing the
aria-labelto provide additional context about what is loading, for example,aria-label="loading settings panel". - Screen-reader users will hear the
aria-labelat a regular interval, which you can customize using theannouncerIntervalproperty. - After a set timeout, the component will stop announcing the
aria-label, which you can customize using theannouncerTimeoutproperty. - Screen-reader users will hear a completion message when the spinner unmounts to indicate that loading has finished. You can customize this using the
completionAnnouncementprop or disable it by settingcompletionAnnouncement={null}.