Progress bar

The progress bar component is used to visually represent the completion of a task or operation. It shows how much of the task has been completed and how much is still left.

Use this component to visually represent the completion of a task or operation.

import {ProgressBar} from '@shopify/polaris';
import React from 'react';

function ProgressBarExample() {
  return (
    <div style={{width: 225}}>
      <ProgressBar progress={75} />
    </div>
  );
}

Use the size option when you need to increase or decrease the visual weight of the progress bar.

import {ProgressBar} from '@shopify/polaris';
import React from 'react';

function ProgressBarExample() {
  return (
    <div style={{width: 225}}>
      <ProgressBar progress={40} size="small" />
    </div>
  );
}

Use the color option when you need to blend the progress bar in a context that calls for it, such as a progress toward success or where it’s the primary focus.

import {ProgressBar} from '@shopify/polaris';
import React from 'react';

function ProgressBarExample() {
  return (
    <div style={{width: 225}}>
      <ProgressBar progress={70} color="primary" />
      <br />
      <ProgressBar progress={30} color="success" />
    </div>
  );
}

Use the animated prop when you want to show a static progress bar.

import {ProgressBar} from '@shopify/polaris';
import React from 'react';

function ProgressBarExample() {
  return (
    <div style={{width: 225}}>
      <ProgressBar progress={80} animated={false} />
    </div>
  );
}

Props

Want to help make this feature better? Please share your feedback.

interface ProgressBarProps
progress?number

The progression of certain tasks.

Defaults to 0.

size?'small' | 'medium' | 'large'

Size of progressbar.

Defaults to 'medium'.

color?'highlight' | 'primary' | 'success' | 'critical'

Color of progressbar.

Defaults to 'highlight'.

animated?boolean

Whether the fill animation is triggered.

Defaults to 'true'.

ariaLabelledBy?string

Id (ids) of element (elements) that describes progressbar.

Best practices

Progress bar components should:

  • Give merchants an indication of how much of the task has completed and how much is left.
  • Not be used for entire page loads. In this case, use the Skeleton page component.

  • For tasks with a short load time, use the Spinner component
  • For full page loads, use the Skeleton page component