Skip to contentSkip to navigation
DocsDocs

Progress

How much of a task is done, or that it runs while the amount is unknown.

BetaSince 1.0.0
On this page

Overview

Show code, UploadingFile.tsx

Variants

Steps

The track can split into equal steps that fill in turn.

Show code, SetupSteps.tsx

Anatomy

  1. Progress

  2. Label

  3. Value

  4. Track

  5. Indicator

Show code, ProgressAnatomy.tsx

Behaviour

Amount known

The bar counts the work done, such as 40 of 100.

Amount unknown

While the amount of work is unknown, the indicator sweeps along the track.

Show code, PreparingExport.tsx

From preparing to done

Start with an unknown amount, show the share once it is known, and replace the bar with the result.

Show code, ExportMembers.tsx

Adapting to width

The bar fills its container. The label and the value wrap onto two lines where they don't fit.

Show code, LongTaskName.tsx

Rules

One bar stands for one task.

Use it when

  • A task whose completion can be measured, such as an upload or an import
  • A task that has started but can't be measured yet, such as preparing an export
DoOne bar for one task, however many items it covers.
Show code, OneBarForBatch.tsx
CautionA bar for every file of one task: more to follow than one bar for the whole.
Show code, BarPerFile.tsx

Moving forward

Never move the bar backwards or hold it just short of the end, and offer a way to cancel a long task beside it.

Related

  • Files that each upload on their own, with a bar in each file's row.

  • A measurement within a range, such as seats assigned or storage used.

  • Work of unknown length in a small area, such as a panel that is updating.

  • Loading a page or a route of an application, along the top bar.

  • Content of a known shape loading in its place, such as a card or a list, as a skeleton.