Loading indicators

Anything that shows the site is busy: a progress bar, a spinning icon, or gray placeholders where content will appear.

Also called: loader, loading, preloader, spinner, loading spinner, throbber, spinning circle, spinning wheel, progress bar, loading bar, percent, percentage

What it is for

If nothing changes on screen after you click, it looks like the site froze. An indicator shows the request is being handled. A progress bar is for when you know how long the wait will be, a spinner for when you don’t. Skeletons, the gray blocks standing in for future text and images, show in advance where things will appear.

Where you see it

• File uploads — a bar with a percentage
• Submit buttons — a spinner in place of the label while the request runs
• Social networks and YouTube — gray blocks where posts haven’t loaded yet

What it is called in code

• <progress>
• Progress
• Spinner
• Skeleton

See also

• Toast (notification) — A small message that pops up briefly at the bottom or in a corner of the screen and disappears on its own.
• Button — An element you click or tap to make something happen: send a form, save your data, go to the next step.
• Pagination — A way to split a long list into separate pages or batches.