Skip to content
Download assets

Loading

Loading is the wait between asking for something and having it. Show the shape of what is coming at once, and say in words when the wait runs long.

Choosing the indicator

Tie the indicator to what is waiting and keep the rest of the page working. A panel that loads does not block the page, and a page that loads does not hide behind a spinner.

A page or a panel opens

Its skeleton, from the first frame.

Loading candidates

A button starts work

The button stops taking presses at once. Its spinner appears after a second.

A list loads more rows

A 20 px spinner in the list footer.

  • Sita GurungWelder, Nepal
  • Ram ThapaWelder, India
Loading more candidates

Work of known size

A progress bar with counts, where the work started.

Importing candidates41%

candidates.xlsx1,240 of 3,000 candidates

Work that outlasts the page

The bar where it started, then a toast or a notification when it ends.

3,000 candidates imported

As the wait grows

Each step keeps what you already see. The skeleton stays in place, and a message that arrives late sits above the content, not over it.

0 s

Up to a second

A button waits disabled. A page already shows its skeleton.

1 s

Up to ten seconds

The skeleton, or the spinner of the button.

10 s

After ten seconds

A neutral inline message above the content says what is still loading.

Failed

When the request fails

The error in place, with Try again.

The board is still loading. Your connection may be slow.

NameStatusOwnerCountry

Offline

When the connection drops, the page keeps what it has and says so in a neutral band. Actions that need the network wait and run when it returns, or say that they cannot.

Candidates

You are offline. Some actions wait until the connection is back.

  • Sita GurungWelder, Nepal
  • Ram ThapaWelder, India
  • Bikash RaiPipe fitter, Nepal

When part of it arrives

Show what arrived, and name what did not in a warning band at the top of the list, with Try again: “Some notifications did not load.” The rows that loaded stay where they are.

Notifications

Some notifications did not load.

  • Ana Horvatassigned you to Welders for Split9:42
  • Marko Babićsent Contract for the welding team9:15

What a screen reader hears

The loading region is marked busy and says one sentence, such as “Loading candidates”. A wait you started with a button is carried by the button's busy state. When the content arrives, focus stays where it was.

<section aria-busy="true">
  <p role="status" class="visually-hidden">Loading candidates</p>
  <div aria-hidden="true"><!-- the skeleton rows --></div>
</section>

NextErrors

Loading

Chooses the indicator for a wait and sets what happens as the wait grows, when it fails, when it partly fails and when the reader is offline.

  • Kind: pattern
  • Page: https://design.werklist.com/patterns/loading
  • Version: 2.1.2

When to use it

  • A page or a panel that opens
  • An action that waits on the server
  • Imports and uploads
  • A slow network, and offline

When not to use it

  • A lone spinner for a page load
  • Blocking the page for one panel
  • More than one indicator for one action

Rules

  • A page or a panel shows its skeleton from the first frame.
  • A button stops taking presses at once. Its spinner appears after one second.
  • A list that loads more rows shows a 20 px spinner in its footer.
  • Work of known size shows a progress bar with counts, where the work started.
  • Work that outlasts the page keeps its bar and ends with a toast if the reader is still in the module, or a notification if not.
  • After 10 seconds the skeleton stays, and a neutral inline message above the content says what is still loading. It leaves when the content arrives.
  • A failed request shows the error in place with Try again.
  • A partial failure keeps what arrived and shows a warning band with Try again.
  • Offline, the page keeps what it has and says so in a neutral band. Actions that need the network wait and run when it returns, or say that they cannot.
  • Focus never moves because content arrived.

Accessibility

  • The loading region is marked busy with aria-busy.
  • Each region says one visually hidden status sentence, once: 'Loading candidates'.
  • A wait started with a button is carried by the button's busy state.

Content

  • Name what is loading: 'The board is still loading. Your connection may be slow.'
  • Offline: 'You are offline. Some actions wait until the connection is back.'
  • Partial: 'Some notifications did not load.' with Try again

JSON

{
  "title": "Loading",
  "path": "/patterns/loading",
  "url": "https://design.werklist.com/patterns/loading",
  "text": "https://design.werklist.com/agent/patterns/loading",
  "summary": "What you see from asking for something until it arrives, including a slow network and a partial load.",
  "version": "2.1.2",
  "kind": "pattern",
  "name": "Loading",
  "purpose": "Chooses the indicator for a wait and sets what happens as the wait grows, when it fails, when it partly fails and when the reader is offline.",
  "use": [
    "A page or a panel that opens",
    "An action that waits on the server",
    "Imports and uploads",
    "A slow network, and offline"
  ],
  "avoid": [
    "A lone spinner for a page load",
    "Blocking the page for one panel",
    "More than one indicator for one action"
  ],
  "rules": [
    "A page or a panel shows its skeleton from the first frame.",
    "A button stops taking presses at once. Its spinner appears after one second.",
    "A list that loads more rows shows a 20 px spinner in its footer.",
    "Work of known size shows a progress bar with counts, where the work started.",
    "Work that outlasts the page keeps its bar and ends with a toast if the reader is still in the module, or a notification if not.",
    "After 10 seconds the skeleton stays, and a neutral inline message above the content says what is still loading. It leaves when the content arrives.",
    "A failed request shows the error in place with Try again.",
    "A partial failure keeps what arrived and shows a warning band with Try again.",
    "Offline, the page keeps what it has and says so in a neutral band. Actions that need the network wait and run when it returns, or say that they cannot.",
    "Focus never moves because content arrived."
  ],
  "accessibility": [
    "The loading region is marked busy with aria-busy.",
    "Each region says one visually hidden status sentence, once: 'Loading candidates'.",
    "A wait started with a button is carried by the button's busy state."
  ],
  "content": [
    "Name what is loading: 'The board is still loading. Your connection may be slow.'",
    "Offline: 'You are offline. Some actions wait until the connection is back.'",
    "Partial: 'Some notifications did not load.' with Try again"
  ]
}

Raw file: https://design.werklist.com/agent/patterns/loading