Skip to contentShopify logoPolaris

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>
  );
}

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