Progress bar

A progress bar communicates the status of a system process.

Appearance

Default

The default appearance of a progress bar.

import React from 'react';

import ProgressBar from '@atlaskit/progress-bar';

const ProgressBarDefaultExample = (): React.JSX.Element => {
	return <ProgressBar ariaLabel="Done: 3 of 10 work items" value={0.3} />;
};

export default ProgressBarDefaultExample;

Inverse

Use the inverse appearance on bold backgrounds to maintain suitable contrast.

import React from 'react';

import ProgressBar from '@atlaskit/progress-bar';

const ProgressBarInverseExample = (): React.JSX.Element => {
	return <ProgressBar appearance="inverse" ariaLabel="Done: 6 of 10 work items" value={0.6} />;
};

export default ProgressBarInverseExample;

Success

The success appearance lets people know that the process is complete.

import React from 'react';

import ProgressBar from '@atlaskit/progress-bar';

const ProgressBarSuccessExample = (): React.JSX.Element => {
	return <ProgressBar appearance="success" ariaLabel="Done: 10 of 10 work items" value={1} />;
};

export default ProgressBarSuccessExample;

Indeterminate

Indeterminate progress bars display movement along the container until the process is finished. Use this when the percentage amount of the progress bar is unknown.

import React from 'react';

import ProgressBar from '@atlaskit/progress-bar';

const ProgressBarIndeterminateExample = (): React.JSX.Element => {
	return <ProgressBar ariaLabel="Loading work items" isIndeterminate />;
};

export default ProgressBarIndeterminateExample;

Was this page helpful?

We use this feedback to improve our documentation.