Activity indicator

Activity indicators visually communicate the status of ongoing processes and indicates that the system is responding to a user action.

Usage

When to use

Activity indicators can either be used in full screen or within a component to indicate the status of a particular user-initiated activity, such as a request submission or file upload. For initial page loads, use skeleton loaders instead of activity indicators, unless when the content can't be represented properly by a skeleton loader, such as a chart.

When not to use

Don't use when the processing time is short

Don't use an activity indicator when the process is expected to take less than one second.
⁠

Don't use it as a progress bar

Activity indicators may be visually similar to a progress bar, but they have different usages and should not be used to visually track a task's progress.

Component comparison table

Component	Usage	Best used for	Display duration
Activity indicator	Use it to show that the system is processing a user action, such as a form submission, or when something is loading.	Data retrieval, data submission, loading, etc	Usually between 2 to 10 seconds depending on loading speed.
Skeleton loader	Always use it to represent initial page load, except when content can't be displayed with a skeleton loader, such as a chart, then use the activity indicator.	Loading of content	Anything from 0 to 10 seconds depending on loading speed.
Progress bar	Use it to tell users how far along they are in a process, but don't use it to represent loading.	Usually for a user task or challenge	Persistently displayed based on the user's progression towards completion.