Structure
The Spinner component renders a native HTML <div> element by default and has no inherent interactivity, semantic role, or ARIA attributes. The label is a simple <span> element with no additional semantic meaning.
Color and meaning
In many contexts, color may be used to help communicate a specific meaning to the user. However, color should never be the sole indicator of the intended meaning. Not all sighted users experience color the same way.
When using the Spinner, we highly recommend considering strong and effective supplementary or label text. Text and color should work together to communicate the intended meaning.
Using motion
Motion and animation add a layer of interactivity that can visually enhance a user experience. However, keep in mind that some users are sensitive to motion or may have cognitive disabilities that can distract them. Such users may have enabled options within their operating system to help reduce animations and motion. Under these settings, the Spinner component will be changed to a static dotted circle to convey a loading state with no motion.