What is a loading indicator component?

A loading indicator is an animated spinning or dot icon that lets users know content is being loaded. This helps to reduce user anxiety and reassures the user that the screen is executing a loading process and is not frozen.

1. It shows users that their request is being executed and that the system is active.

2. It can be either determinate or indeterminate.

3. It may be accompanied with a text label to give users more context about the process.

4. It may be customised to fit the brand identity, and can be used as a branding moment.

Loading indicators are commonly used in the following design patterns: Data/content loading, Form submission, Page transitions.

One must consider the difference between determinate and indeterminate loading indicators.

1. Determinate loading process: Shows exact progress level or percentage. Used for predictable tasks, with measurable progress - this helps users gauge how much longer a task will take. Examples: File uploads or downloads.
2. Indeterminate loading process: Shows that a loading task is ongoing, without a specific progress value. Used for unpredicatable tasks with unmeasurable progress. Examples: Server requests, data fetching.

What is the anatomy of a loading indicator?

We've observed four key vairants of loading indicators: Circle, Bar, iOS Spinner, and Dots.

What are the design variants of a loading indicator?

We studied over 3,400+ loading indicator UI components on Mobbin, from real-world examples and found the following variants.

1. Circle or spinner loading indicator

Here are some circle spinner loading indicators without labels.

If space permits, adding a label to the circle spinner indicators can help give context to users on the action that's being loaded.

For example, verifying an account, or purchasing a subscription.

Some brands opt to go for spinners with their logo centered inside of it, of an animated form of their logo, similar to what Figma or Mobbin has.

There is really no norm that you need to follow - we've seen all kinds of funky spinners used by many different notable brands across the world.

2. Dot spinner

3. iOS spinner

Default iOS styled spinner.

When to use a loading indicator?

1. Data / content loading

When an app fetches or loads large amounts of data, an indicator can be displayed to indicate that the content is being retrieved and processed.

2. Form submission

When a user submits a form or performs an action that requires processing, an indicator can be displayed to indicate that the app is working on the request. This helps to manage user expectations and provides visual feedback that the action is being processed.

3. Page transitions

Loading indicators can be used during page transitions, such as when navigating between different sections or screens within the app. They serve as a visual cue that the next content is being loaded.

Conflicting UI elements: Progress indicator, Skeleton screen

1. Loading indicators v.s. Progress indicators

Progress indicators are used to indicate the progress of a task such as a download, a file upload, or a video streaming. Additionally, progress indicators can be interacted with to be able to cancel or pause the current task.

2. Loading indicators v.s. Skeleton screen

A Skeleton screen is a type of loading indicator as well - it was popularized by Twitter in 2012, introduced as a technique to enhance user experience during loading times by displaying a lightweight placeholder interface.

It allows users to see a preview of the content that will load, making the experience feel faster and more engaging.