# Spinners A turning ring, 1 em across in the color of the text around it, for something small that is on its way. A button shows its own while busy; a region shows an overlay. ## Examples The words beside the spinner say what is happening; the ring alone is hidden from assistive technology. ```html Rebuilding 3 pages… Larger, in the accent ``` ### A growing dot `spinner-grow` is a dot that grows and fades in place of the ring, for a calmer sign in a line of text. ```html Checking the server… Syncing the calendar ``` ## Accessibility - A spinner moves even for people who ask for less motion - it is the sign that something is happening - and stays a ring or a dot in forced colors. - Say the same in words, in a live region when it starts after an action. ## Tokens From [`css/components/spinner.css`](https://github.com/redz-tech/REDZ.UI/blob/main/css/components/spinner.css), which declares no custom property of its own.