Progress bar Preview

A progress bar lets someone know there’s a background task in progress.

Use progress bars for loading states that take longer than one second but avoid them for long loading processes. They’re indeterminate and don’t convey how much of the process is left. To communicate how much time is left, try the native determinate progress bar. If it’s possible to give someone an idea of the loading content’s structure, try a shimmer.

Resources


Behavior

Indeterminate progress bars continually cycle to indicate that something is happening but not when it might be finished. Using indeterminate loaders for long periods can make someone think something’s gone wrong.


Layout

Be consistent when placing progress indicators within an experience. People generally know to look for them below the navigation bar, so make sure to keep them in a place that feels comfortable.

Layout consistency

Accessibility

Add an animating label while the activity indicator is on screen to let people who use VoiceOver know what’s happening.