Spinner

A rotating circle that can replace an icon inside a component to indicate a loading state.

In response to user actions, a loading state isn’t always shown because most actions happen within seconds. But for operations that take longer than usual, it’s crucial to communicate to the users that the system is processing their request. For this, a loading state(in this case the spinner) should show in response to a user action when expecting operations to take longer than 2 seconds.


Anatomy

  1. Circle. A ¾ filled circle with color-grey-200 or otherwise appropriate color.

Component Health

Healthy
Show details
Healthy
Published: August 09, 2024
Updated: August 21, 2024