Progress Bar

yarn add @clayui/progress-bar

React Component
CSS / Markup

Stable3.0.1

Progress bar indicates the percentage completed of a task.

Status
Feedback
API

Take a look at our Storybook for more information about this component.

Check the Lexicon Progress Bars Pattern for a more in-depth look at the motivations and proper usage of this component.

Progress Bar is used to indicate a percentage of something.

50%

20%

import ClayProgressBar from '@clayui/progress-bar';
import React from 'react';

import ClayProgressBar from '@clayui/progress-bar';
import React from 'react';

const Component = () => {
  return (
    <>
      <ClayProgressBar spritemap={spritemap} value={50} />
      <ClayProgressBar spritemap={spritemap} value={100} />
      <ClayProgressBar spritemap={spritemap} value={20} />
      <ClayProgressBar spritemap={spritemap} value={20} />
    </>
  );
};

render(<Component />);

const Component = () => {
  return (
    <>
      <ClayProgressBar spritemap={spritemap} value={50} />
      <ClayProgressBar spritemap={spritemap} value={100} />
      <ClayProgressBar spritemap={spritemap} value={20} />
      <ClayProgressBar spritemap={spritemap} value={20} />
    </>
  );
};
render(<Component />);

Status

You can use value property to define the percentage value of the progress bar.

When value is 100, the color of the progress bar will be styled to success.

Also, you can use warn property to set the color of the progress bar fixed on warning.

50%

import ClayProgressBar from '@clayui/progress-bar';
import React from 'react';

import ClayProgressBar from '@clayui/progress-bar';
import React from 'react';

const Component = () => {
  return (
    <>
      <ClayProgressBar spritemap={spritemap} value={0} />

      <ClayProgressBar spritemap={spritemap} value={50} />

      <ClayProgressBar spritemap={spritemap} value={100} />

      <ClayProgressBar spritemap={spritemap} value={50} warn />

      <ClayProgressBar spritemap={spritemap} value={100} warn />
    </>
  );
};

render(<Component />);

const Component = () => {
  return (
    <>
      <ClayProgressBar spritemap={spritemap} value={0} />
      <ClayProgressBar spritemap={spritemap} value={50} />
      <ClayProgressBar spritemap={spritemap} value={100} />
      <ClayProgressBar spritemap={spritemap} value={50} warn />
      <ClayProgressBar spritemap={spritemap} value={100} warn />
    </>
  );
};
render(<Component />);

Feedback

Use feedback property to provide the same visual feedback to all items wrapped by ClayProgressBar.

99% Completed

100% Completed

99% Completed

import ClayProgressBar from '@clayui/progress-bar';
import React from 'react';

import ClayProgressBar from '@clayui/progress-bar';
import React from 'react';

const Component = () => {
  return (
    <>
      <ClayProgressBar feedback spritemap={spritemap} value={99}>
        <div className="progress-group-addon">99% Completed</div>
      </ClayProgressBar>
      <ClayProgressBar feedback spritemap={spritemap} value={100}>
        <div className="progress-group-addon">100% Completed</div>
      </ClayProgressBar>
      <ClayProgressBar feedback spritemap={spritemap} value={99} warn>
        <div className="progress-group-addon">99% Completed</div>
      </ClayProgressBar>
    </>
  );
};

render(<Component />);

const Component = () => {
  return (
    <>
      <ClayProgressBar feedback spritemap={spritemap} value={99}>
        <div className="progress-group-addon">99% Completed</div>
      </ClayProgressBar>
      <ClayProgressBar feedback spritemap={spritemap} value={100}>
        <div className="progress-group-addon">100% Completed</div>
      </ClayProgressBar>
      <ClayProgressBar feedback spritemap={spritemap} value={99} warn>
        <div className="progress-group-addon">99% Completed</div>
      </ClayProgressBar>
    </>
  );
};
render(<Component />);

API

Property	Type	Default	Description
feedback	boolean	false	Flag to indicate if `children` should be wrapped as `feedback`.
value	number	0	The current value of the progress bar. Should range from 0 to 100.
spritemap	string		Path to spritemap for icon symbol.
warn	boolean		Flag to indicate whether a "warning" color for the bar.

Progress bar indicates the percentage completed of a task.

Colors
- Group
Sizes
Groups
- Addon
- Stacked
Multiple Progress Bars
Labels
Striped
Animated Stripes

Check the Lexicon Progress Bars Pattern for a more in-depth look at the motivations and proper usage of this component.

See the implementation of the Progress Bars component in React following the Lexicon Progress Bars Pattern.

Colors

Add progress-danger, progress-info, progress-success, or progress-warning to progress-group or progress to provide visual feedback for different progress states. Color a block of text or icon by wrapping it with progress-group-feedback.

Using the color classes will set the background-color on progress-bar, no need to use Bootstrap 4 background utility classes.

25%

50%

75%

100%

<div class="progress">
	<div
		aria-valuenow="25"
		aria-valuemin="0"
		aria-valuemax="100"
		class="progress-bar"
		role="progressbar"
		style="width: 25%;"
	>
		25%
	</div>
</div>
<div class="progress progress-success">
	<div
		aria-valuenow="25"
		aria-valuemin="0"
		aria-valuemax="100"
		class="progress-bar progress-bar-striped"
		role="progressbar"
		style="width: 25%;"
	>
		25%
	</div>
</div>
<div class="progress progress-info">
	<div
		aria-valuenow="50"
		aria-valuemin="0"
		aria-valuemax="100"
		class="progress-bar"
		role="progressbar"
		style="width: 50%;"
	>
		50%
	</div>
</div>
<div class="progress progress-warning">
	<div
		aria-valuenow="75"
		aria-valuemin="0"
		aria-valuemax="100"
		class="progress-bar progress-bar-animated progress-bar-striped"
		role="progressbar"
		style="width: 75%;"
	>
		75%
	</div>
</div>
<div class="progress progress-danger">
	<div
		aria-valuenow="100"
		aria-valuemin="0"
		aria-valuemax="100"
		class="progress-bar"
		role="progressbar"
		style="width: 100%;"
	>
		100%
	</div>
</div>

Group

60%

<div class="progress-group">
	<div class="progress">
		<div
			aria-valuenow="60"
			aria-valuemin="0"
			aria-valuemax="100"
			class="progress-bar"
			role="progressbar"
			style="width: 60%;"
		></div>
	</div>
	<div class="progress-group-addon">60%</div>
</div>
<div class="progress-group progress-success">
	<div class="progress">
		<div
			aria-valuenow="100"
			aria-valuemin="0"
			aria-valuemax="100"
			class="progress-bar progress-bar-striped"
			role="progressbar"
			style="width: 100%;"
		></div>
	</div>
	<div class="progress-group-addon">
		<div class="progress-group-feedback">
			<svg
				class="lexicon-icon lexicon-icon-check-circle"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#check-circle" />
			</svg>
		</div>
	</div>
</div>
<div class="progress-group progress-info">
	<div class="progress">
		<div
			aria-valuenow="100"
			aria-valuemin="0"
			aria-valuemax="100"
			class="progress-bar"
			role="progressbar"
			style="width: 100%;"
		></div>
	</div>
	<div class="progress-group-addon">
		<div class="progress-group-feedback">
			<svg
				class="lexicon-icon lexicon-icon-info-circle-open"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#info-circle-open" />
			</svg>
		</div>
	</div>
</div>
<div class="progress-group progress-warning">
	<div class="progress">
		<div
			aria-valuenow="100"
			aria-valuemin="0"
			aria-valuemax="100"
			class="progress-bar progress-bar-animated progress-bar-striped"
			role="progressbar"
			style="width: 100%;"
		></div>
	</div>
	<div class="progress-group-addon">
		<div class="progress-group-feedback">
			<svg
				class="lexicon-icon lexicon-icon-info-exclamation-circle"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#info-exclamation-circle" />
			</svg>
		</div>
	</div>
</div>
<div class="progress-danger progress-group">
	<div class="progress">
		<div
			aria-valuenow="100"
			aria-valuemin="0"
			aria-valuemax="100"
			class="progress-bar"
			role="progressbar"
			style="width: 100%;"
		></div>
	</div>
	<div class="progress-group-addon">
		<div class="progress-group-feedback">
			<svg
				class="lexicon-icon lexicon-icon-times-circle"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#times-circle" />
			</svg>
		</div>
	</div>
</div>

Sizes

We only set a height value on the .progress, so if you change that value the inner .progress-bar will automatically resize accordingly.

25%

60%

45%

60%

<div class="progress">
	<div
		aria-valuenow="25"
		aria-valuemin="0"
		aria-valuemax="100"
		class="progress-bar"
		role="progressbar"
		style="width: 25%;"
	>
		25%
	</div>
</div>
<div class="progress-group">
	<div class="progress">
		<div
			aria-valuenow="60"
			aria-valuemin="0"
			aria-valuemax="100"
			class="progress-bar"
			role="progressbar"
			style="width: 60%;"
		></div>
	</div>
	<div class="progress-group-addon">60%</div>
</div>
<div class="progress progress-lg">
	<div
		aria-valuenow="45"
		aria-valuemin="0"
		aria-valuemax="100"
		class="progress-bar"
		role="progressbar"
		style="width: 45%;"
	>
		45%
	</div>
</div>
<div class="progress-group progress-lg">
	<div class="progress">
		<div
			aria-valuenow="60"
			aria-valuemin="0"
			aria-valuemax="100"
			class="progress-bar"
			role="progressbar"
			style="width: 60%;"
		></div>
	</div>
	<div class="progress-group-addon">60%</div>
</div>
<div class="progress" style="height: 20px;">
	<div
		class="progress-bar"
		role="progressbar"
		style="width: 25%;"
		aria-valuenow="25"
		aria-valuemin="0"
		aria-valuemax="100"
	></div>
</div>

Groups

Addon

Place an addon on either side of a progress component with progress-group and progress-group-addon.

30%

70%

<div class="progress-group">
	<div class="progress">
		<div
			aria-valuenow="30"
			aria-valuemin="0"
			aria-valuemax="100"
			class="progress-bar"
			role="progressbar"
			style="width: 30%;"
		></div>
	</div>
	<div class="progress-group-addon">30%</div>
</div>
<div class="progress-group progress-warning">
	<div class="progress">
		<div
			aria-valuenow="70"
			aria-valuemin="0"
			aria-valuemax="100"
			class="progress-bar"
			role="progressbar"
			style="width: 70%;"
		></div>
	</div>
	<div class="progress-group-addon">70%</div>
</div>
<div class="progress-group progress-success">
	<div class="progress">
		<div
			aria-valuenow="100"
			aria-valuemin="0"
			aria-valuemax="100"
			class="progress-bar"
			role="progressbar"
			style="width: 100%;"
		></div>
	</div>
	<div class="progress-group-addon">
		<div class="progress-group-feedback">
			<svg
				class="lexicon-icon lexicon-icon-check-circle"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#check-circle" />
			</svg>
		</div>
	</div>
</div>
<div class="progress-group">
	<div class="progress-group-addon">
		<div class="progress-group-feedback">
			<svg
				class="lexicon-icon lexicon-icon-check-circle"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#check-circle" />
			</svg>
		</div>
	</div>
	<div class="progress">
		<div
			aria-valuenow="100"
			aria-valuemin="0"
			aria-valuemax="100"
			class="progress-bar"
			role="progressbar"
			style="width: 100%;"
		></div>
	</div>
</div>

Stacked

Add progress-group-stacked to progress-group stack the addons and progress component.

60% Completed

<div class="progress-group progress-group-stacked">
	<div class="progress-group-addon">60% Completed</div>
	<div class="progress">
		<div
			aria-valuenow="60"
			aria-valuemin="0"
			aria-valuemax="100"
			class="progress-bar"
			role="progressbar"
			style="width: 60%;"
		></div>
	</div>
	<div class="progress-group-addon">
		<svg
			class="lexicon-icon lexicon-icon-cog"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#cog" />
		</svg>
	</div>
</div>

Multiple Progress Bars

If you need multiple progress bars, use Bootstrap 4's background utilities, bg-primary, bg-success, bg-info, bg-warning, and bg-danger on progress-bar.

25%

50%

33%

45%

10%

<div class="progress">
	<div
		class="bg-success progress-bar progress-bar-striped"
		style="width: 25%"
	>
		25%
	</div>
	<div class="bg-success progress-bar" style="width: 25%">25%</div>
	<div
		class="bg-success progress-bar progress-bar-animated progress-bar-striped"
		style="width: 25%"
	>
		25%
	</div>
</div>
<div class="progress">
	<div class="bg-info progress-bar progress-bar-striped" style="width: 50%">
		50%
	</div>
	<div class="bg-info progress-bar" style="width: 50%">50%</div>
</div>
<div class="progress">
	<div
		class="bg-warning progress-bar progress-bar-animated progress-bar-striped"
		style="width: 33%"
	>
		33%
	</div>
	<div
		class="bg-warning progress-bar progress-bar-striped"
		style="width: 33%"
	>
		33%
	</div>
</div>
<div class="progress">
	<div class="bg-danger progress-bar" style="width: 45%">45%</div>
	<div
		class="bg-danger progress-bar progress-bar-animated progress-bar-striped"
		style="width: 45%"
	>
		45%
	</div>
</div>
<div class="progress">
	<div class="progress-bar" style="width: 10%">10%</div>
	<div class="bg-warning progress-bar" style="width: 10%">10%</div>
	<div class="bg-success progress-bar" style="width: 10%">10%</div>
	<div class="bg-info progress-bar" style="width: 10%">10%</div>
	<div
		class="bg-success progress-bar progress-bar-striped"
		style="width: 10%"
	>
		10%
	</div>
	<div
		class="bg-danger progress-bar progress-bar-animated progress-bar-striped"
		style="width: 10%"
	>
		10%
	</div>
	<div
		class="progress-bar progress-bar-animated progress-bar-striped"
		style="width: 10%"
	>
		10%
	</div>
</div>

Labels

Add labels to your progress bars by placing text within the .progress-bar.

25%

<div class="progress">
	<div
		class="progress-bar"
		role="progressbar"
		style="width: 25%;"
		aria-valuenow="25"
		aria-valuemin="0"
		aria-valuemax="100"
	>
		25%
	</div>
</div>

Striped

Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar’s background color.

<div class="progress">
	<div
		class="progress-bar progress-bar-striped"
		role="progressbar"
		style="width: 10%"
		aria-valuenow="10"
		aria-valuemin="0"
		aria-valuemax="100"
	></div>
</div>
<div class="progress">
	<div
		class="progress-bar progress-bar-striped bg-success"
		role="progressbar"
		style="width: 25%"
		aria-valuenow="25"
		aria-valuemin="0"
		aria-valuemax="100"
	></div>
</div>
<div class="progress">
	<div
		class="progress-bar progress-bar-striped bg-info"
		role="progressbar"
		style="width: 50%"
		aria-valuenow="50"
		aria-valuemin="0"
		aria-valuemax="100"
	></div>
</div>
<div class="progress">
	<div
		class="progress-bar progress-bar-striped bg-warning"
		role="progressbar"
		style="width: 75%"
		aria-valuenow="75"
		aria-valuemin="0"
		aria-valuemax="100"
	></div>
</div>
<div class="progress">
	<div
		class="progress-bar progress-bar-striped bg-danger"
		role="progressbar"
		style="width: 100%"
		aria-valuenow="100"
		aria-valuemin="0"
		aria-valuemax="100"
	></div>
</div>

Animated Stripes

The striped gradient can also be animated. Add .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations.

<div class="progress">
	<div
		class="progress-bar progress-bar-striped progress-bar-animated"
		role="progressbar"
		aria-valuenow="75"
		aria-valuemin="0"
		aria-valuemax="100"
		style="width: 75%"
	></div>
</div>