Spinner

Also known as

Loader, Loading, Progress

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.

  • Improve accessibility by customizing the aria-label to provide additional context about what is loading, for example, aria-label="loading settings panel".
  • Screen-reader users will hear the aria-label at a regular interval, which you can customize using the announcerInterval property.
  • After a set timeout, the component will stop announcing the aria-label, which you can customize using the announcerTimeout property.
  • Screen-reader users will hear a completion message when the spinner unmounts to indicate that loading has finished. You can customize this using the completionAnnouncement prop or disable it by setting completionAnnouncement={null}.