Loader

A loader, also known as an activity indicator or spinner, is an animated graphic that notifies users that an operation is in progress. It helps manage expectations during a waiting period of unknown duration, such as fetching data or processing a request.

When to use

Data fetching

When loading data from a server or API to populate a page or component.

Data fetching

When loading data from a server or API to populate a page or component.

Form submissions

Display after a user submits a form to indicate that their submission is being processed.

Form submissions

Display after a user submits a form to indicate that their submission is being processed.

In-place loading

Use within a specific component (like a card or modal) when only that section of the UI is loading new content.

In-place loading

Use within a specific component (like a card or modal) when only that section of the UI is loading new content.

Page transitions

Display a loader during initial page loads or when navigating between complex views.

Page transitions

Display a loader during initial page loads or when navigating between complex views.

When to avoid

Determinate processes

If a process has a known duration or progress (like a file upload), use a progress bar instead. A progress bar is more informative as it shows how much is complete.

Determinate processes

If a process has a known duration or progress (like a file upload), use a progress bar instead. A progress bar is more informative as it shows how much is complete.

Very fast actions

Avoid showing a loader for operations that complete in under a second. A brief flash of a loader can be more distracting than helpful.

Very fast actions

Avoid showing a loader for operations that complete in under a second. A brief flash of a loader can be more distracting than helpful.

Specifications

Types

Oval

A circular spinner. This is a classic, universally understood loader suitable for most use cases, especially in compact spaces.

Bars

A series of animating vertical bars. A stylistic alternative to the oval.

Dots

A sequence of three or more animating dots. Another alternative to the oval.

Size

Anatomy

Track

Represents the total progress to be completed for the animated spinner. Not all of Loader variants include a track based on the component style and animation type.

Indicator

Animates along the track to visually represent the current percentage of completion.

Value

Loader