skip to content
menu
patterns · loading and progress
patternsfeedback & status

loading and progress

Some things take a moment: a list loads, a file copies, a check runs. While people wait, the screen should tell them two things: that something is happening, and, when it can, how far along it is. It should do that quietly, in the place where the result will appear.

saving changesIn a buttonLoading the episode listIn a panel62% · 1.4 of 2.2 gbProgress that is knownA list that loads
From small to large: a busy button, a panel that loads, a copy whose progress is known, and a list that loads for the first time.

which one

the wait show
Under about 0.4 seconds Nothing: a loader that flashes looks like a glitch
Progress that is known, like a copy or an upload A progress bar, with the value in words: “62% · 1.4 of 2.2 gb”
Unknown, in a button, a field or a toolbar A small loader; the label stays
Unknown, in a panel or a player A larger loader, with one line of text
A list or a page Grey blocks in the shape of the content, not a loader in empty space
With reduced motion The loader stands still, and the text says what is happening
For screen readers One status with a label, read out once

the loader

Our loader is a small square: a faint frame with three quarters of it lit in blue, and the gap running round it, one lap in four seconds. Every frame in the system is square; only the moving gap says “working”.

In a buttonIn a panelIn a player
The loader at three sizes. The unlit side is the gap, which runs round the frame.
  • In a button, a field or a toolbar, small, before the label, which stays. Inside a button it takes the label's colour, so it also shows on a blue button.
  • In a panel or a player, larger, centred, with one line under it that says what is loading.
  • With reduced motion it stands still, and its label, or the text beside it, says that something is loading.

The spinner page shows the loader live.

wait a moment first

Most answers come quickly. If the loader appeared at once, it would flash for a split second on almost every click, and that reads as a glitch. So a load that finishes within about 0.4 seconds shows nothing new; the loader appears only after that.

Under 0.4 s: nothingAfter it: the loaderDone: the content0.4 s
Nothing for the first moment, then the loader, then the content in its place.

known progress

When the work knows how far it has come, show a bar and the value in words: the percentage and the amount, like “62% · 1.4 of 2.2 gb”. People read the words; the bar shows how far, at a glance. The progress bar is a planned component.

do
62% · 1.4 of 2.2 gb
Known progress: the value in words, and the bar.
don't
Copying
Known progress shown as a loader that runs round and round: people can't tell whether it is nearly done.

a list or a page

A list or a page that loads for the first time shows grey blocks in the shape of what is coming: rows as long as its rows will be, a title where its title will be. These are skeleton blocks. The page doesn't jump when the content arrives, and people can already see what kind of thing is on its way.

do
Grey blocks in the shape of the list: nothing jumps when the rows arrive.
don't
A loader in empty space where the list will be: the page jumps when it arrives.

Skeleton blocks are planned. Until they arrive, a first load shows the table's running line over an empty body.

A list that refreshes keeps the rows it has, at full strength, with a thin line running along its top edge. The data table does this by itself.

missingmissingmissingmissingmissing
A list that refreshes keeps its rows, with a thin blue line running along its top edge.

how it behaves

  • Show it where the content will be. A busy button keeps its place and its label; a busy list keeps its frame and its rows.
  • One loader per region. A page that loads three panels shows three loaders, one in each panel, rather than one over the whole page.
  • Stop the moment it is done, and put the content in the loader's place, or what went wrong; see empty states and message handling.

Today the components show their busy state the moment it is set; waiting 0.4 seconds first is up to the app.

accessibility

  • One status, with a label, read out once: “Loading the episode list”. Not a stream of updates, and not every few percent of a progress bar.
  • The area that is loading says so too. A busy list or button is marked as busy for screen readers.
  • Motion never carries the message alone. With reduced motion the loader stands still, and the text says what is happening.

Today the loader is read out as “loading”, and a busy button and a busy data table mark themselves as busy.

the words

  • The line of text. What is loading, in the item's own words, in sentence case: “Loading the episode list”, “Asking the catalog”. No “please wait”, and no “almost there”.
  • The value. The percentage, then the amount: “62% · 1.4 of 2.2 gb”, with thousands separators and the unit.
  • When it takes long. Say what is happening, not that it is slow: “Scanning 2,400 of 9,000 files”.