Used when retrieving data or performing slow computations, and help to notify users that loading is underway.


They notify to the user that their request is being processed. Although they do not provide details about what is occurring on the back-end, they reassure the user that their action is being processed. Use a loading spinner whenever the wait time is anticipated to be longer than three seconds.

When to use

  • To give visual feedback on user's action, when it's made.
  • To keep users in the loop and giving up on the journey.
  • To show progress on user action.


Anatomy of loader
  1. Spinner: Animates when it's loading.
  2. Description: Optional text, which adds feedback to the loading state and let user's know what's happening.

Best Practices

  1. Be shown to the user as least as possible.
  2. Give time estimation.
  3. Explain why the user needs to wait.
  4. Make the waiting process less frustrating.

Recommended resources

Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.

Shipfaster UI - Figma Design System
Star IconStar IconStar IconStar IconStar Icon
180+ ratings
Figma's most powerful and comprehensive UI kit and design system. Get instant access to over 6,000 components.