← All terms

Fig. 17 / Spinner & Progress Bar · In motion

Mobile UI Patterns

Spinner & Progress Bar

EXPLAINED SIMPLY:Two loading signals for two kinds of wait.

A spinner is the turning circle that says work is happening without saying how long it will take; a progress bar is the filling track used when the app can honestly show how much is left.

The difference is information. A spinner can promise only "still working." A bar at 64 percent can promise both movement and an eventual end. Use a progress bar when progress is measurable, and a spinner when it genuinely is not.

Both are loading indicators, but they are not interchangeable decoration. A bar that jumps backward or sits at 99 percent for a minute breaks its promise. A spinner left turning forever gives no clue whether the app is busy or stuck. For known layouts, a skeleton screen can be more useful than either because it shows what is coming.

You'll also hear loader, loading spinner, activity indicator, throbber, loading bar, determinate progress, and indeterminate progress. Determinate means the system knows the amount completed. Indeterminate means it knows only that the work has not finished.

Motion is the proof that the interface is still alive. It should be gentle, and people who ask for reduced motion should get a calm alternative. If the wait is long enough to deserve a percentage, do not hide it behind a circle.