Loading

Lets users know that content is being loaded.

  • To let users know progress on their action in the UI is being made.
  • To keep users from giving up on an experience.
  • Especially after user input to prevent repeated action.

Read or listen to more about progress indicators.

  • For progress on a large task with steps users should complete—use a wizard.
  • For progress on a process out of their control—use a timeline.
FigmaReactiOSAndroidDocumentation
Released
Released
n/a
n/a
Released

Animation: varies based on loading type; text: optionally lets users know what's happening.

Differ loading types take up different spaces and create certain expectations in users. Choose the loading type to correspond to the content that’s being loaded.

Loading components help show users progress is being made. Make it clear where the progress is leading with helpful text indicating what’s coming or what action is being taken.