Progress bar usage guidelines

Progress bar makes it easy for users to understand the progress of an operation.

When to use

• To indicate the progress of an ongoing operation.
• To visualize progress towards specific targets, such as service uptime and response times.

When not to use

• For actions and processes for which progress cannot be quantified, use spinner instead.
• For actions and processes that are completed instantly or nearly instantly (less than 1 second) a progress bar is unnecessary and can cause visual confusion.

Examples

Tone

Preview

Base

80%

Success

80%

Warning

80%

Critical

80%

Code

import { ProgressBar, Stack } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <Stack gap={16}>
      <ProgressBar tone="base" label="Base" value={80} />
      <ProgressBar tone="success" label="Success" value={80} />
      <ProgressBar tone="warning" label="Warning" value={80} />
      <ProgressBar tone="critical" label="Critical" value={80} />
    </Stack>
  );
}

Copy code Open in playground

Value	Use cases
Base	Base progress bars represent a neutral progression that doesn’t require much attention.
Success	Success progress bars indicate a successful status or an achieved target.
Warning	Warning progress bars signal a sub-optimal but non-critical status with a slightly negative tone.
Critical	Critical progress bars highlight errors or issues that require user attention.

Non-percentage values

By default, progress bar operates on percentages, and it expects its value prop to be between 0 and 100. If your data has a different range of allowed values, you don’t need to recalculate it manually - provide the upper limit to the maxValue prop instead, and the progress bar will handle the calculation for you. Note that the progress bar will still display the value as a percentage, unless you override it through the valueLabel prop.

Preview

Shipments delivered

4 of 20

Code

import { ProgressBar } from '@cimpress-ui/react';

export default function Demo() {
  return <ProgressBar label="Shipments delivered" value={4} maxValue={20} valueLabel="4 of 20" />;
}

Copy code Open in playground

Formatting and layout

Placement

Progress bar should be placed near the content that it relates to, in order to ensure users immediately connect the status to the specific action or state. When uploading files, progress bar should be close to the “Upload” button. For a page or section, progress bar should be placed on the top, taking all the available horizontal space of the parent container.

Spacing

• Progress bars placed together in groups should have 16px spacing between them.
• Progress bar should have at least 16px spacing between itself and any unrelated element on the page.

Content writing

Label

• Be specific but concise about what the progress bar represents. Stick to short phrases of no more than 3-5 words.
• Do use sentence case with progress bar labels.

Description text

• Do provide description text whenever the label might not be enough context for a user to understand the purpose of the progress bar.
• Do not provide unnecessary description text when the purpose of the progress bar is obvious.
• Do write clear and concise description text. Text should be limited to one sentence.
• End the description text with a period or equivalent punctuation mark. This helps screen reader users understand where the description ends, and it improves readability for all users.