Progress Bar

Progress bar indicates the percentage completed of a task.

install	yarn add @clayui/progress-bar
version
use	`import ProgressBar from '@clayui/progress-bar';`

Table of Contents

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

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 className="progress">
	<div
		aria-valuenow="25"
		aria-valuemin="0"
		aria-valuemax="100"
		className="progress-bar"
		role="progressbar"
		style={{width: '25%'}}
	>
		25%
	</div>
</div>
<div className="progress progress-success">
	<div
		aria-valuenow="25"
		aria-valuemin="0"
		aria-valuemax="100"
		className="progress-bar progress-bar-striped"
		role="progressbar"
		style={{width: '25%'}}
	>
		25%
	</div>
</div>
<div className="progress progress-info">
	<div
		aria-valuenow="50"
		aria-valuemin="0"
		aria-valuemax="100"
		className="progress-bar"
		role="progressbar"
		style={{width: '50%'}}
	>
		50%
	</div>
</div>
<div className="progress progress-warning">
	<div
		aria-valuenow="75"
		aria-valuemin="0"
		aria-valuemax="100"
		className="progress-bar progress-bar-animated progress-bar-striped"
		role="progressbar"
		style={{width: '75%'}}
	>
		75%
	</div>
</div>
<div className="progress progress-danger">
	<div
		aria-valuenow="100"
		aria-valuemin="0"
		aria-valuemax="100"
		className="progress-bar"
		role="progressbar"
		style={{width: '100%'}}
	>
		100%
	</div>
</div>

Group

60%

<div className="progress-group">
	<div className="progress">
		<div
			aria-valuenow="60"
			aria-valuemin="0"
			aria-valuemax="100"
			className="progress-bar"
			role="progressbar"
			style={{width: '60%'}}
		></div>
	</div>
	<div className="progress-group-addon">60%</div>
</div>
<div className="progress-group progress-success">
	<div className="progress">
		<div
			aria-valuenow="100"
			aria-valuemin="0"
			aria-valuemax="100"
			className="progress-bar progress-bar-striped"
			role="progressbar"
			style={{width: '100%'}}
		></div>
	</div>
	<div className="progress-group-addon">
		<div className="progress-group-feedback">
			<svg
				className="lexicon-icon lexicon-icon-check-circle"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#check-circle" />
			</svg>
		</div>
	</div>
</div>
<div className="progress-group progress-info">
	<div className="progress">
		<div
			aria-valuenow="100"
			aria-valuemin="0"
			aria-valuemax="100"
			className="progress-bar"
			role="progressbar"
			style={{width: '100%'}}
		></div>
	</div>
	<div className="progress-group-addon">
		<div className="progress-group-feedback">
			<svg
				className="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 className="progress-group progress-warning">
	<div className="progress">
		<div
			aria-valuenow="100"
			aria-valuemin="0"
			aria-valuemax="100"
			className="progress-bar progress-bar-animated progress-bar-striped"
			role="progressbar"
			style={{width: '100%'}}
		></div>
	</div>
	<div className="progress-group-addon">
		<div className="progress-group-feedback">
			<svg
				className="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 className="progress-danger progress-group">
	<div className="progress">
		<div
			aria-valuenow="100"
			aria-valuemin="0"
			aria-valuemax="100"
			className="progress-bar"
			role="progressbar"
			style={{width: '100%'}}
		></div>
	</div>
	<div className="progress-group-addon">
		<div className="progress-group-feedback">
			<svg
				className="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 className="progress">
	<div
		aria-valuenow="25"
		aria-valuemin="0"
		aria-valuemax="100"
		className="progress-bar"
		role="progressbar"
		style={{width: '25%'}}
	>
		25%
	</div>
</div>
<div className="progress-group">
	<div className="progress">
		<div
			aria-valuenow="60"
			aria-valuemin="0"
			aria-valuemax="100"
			className="progress-bar"
			role="progressbar"
			style={{width: '60%'}}
		></div>
	</div>
	<div className="progress-group-addon">60%</div>
</div>
<div className="progress progress-lg">
	<div
		aria-valuenow="45"
		aria-valuemin="0"
		aria-valuemax="100"
		className="progress-bar"
		role="progressbar"
		style={{width: '45%'}}
	>
		45%
	</div>
</div>
<div className="progress-group progress-lg">
	<div className="progress">
		<div
			aria-valuenow="60"
			aria-valuemin="0"
			aria-valuemax="100"
			className="progress-bar"
			role="progressbar"
			style={{width: '60%'}}
		></div>
	</div>
	<div className="progress-group-addon">60%</div>
</div>
<div className="progress" style={{height: '20px'}}>
	<div
		className="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 className="progress-group">
	<div className="progress">
		<div
			aria-valuenow="30"
			aria-valuemin="0"
			aria-valuemax="100"
			className="progress-bar"
			role="progressbar"
			style={{width: '30%'}}
		></div>
	</div>
	<div className="progress-group-addon">30%</div>
</div>
<div className="progress-group progress-warning">
	<div className="progress">
		<div
			aria-valuenow="70"
			aria-valuemin="0"
			aria-valuemax="100"
			className="progress-bar"
			role="progressbar"
			style={{width: '70%'}}
		></div>
	</div>
	<div className="progress-group-addon">70%</div>
</div>
<div className="progress-group progress-success">
	<div className="progress">
		<div
			aria-valuenow="100"
			aria-valuemin="0"
			aria-valuemax="100"
			className="progress-bar"
			role="progressbar"
			style={{width: '100%'}}
		></div>
	</div>
	<div className="progress-group-addon">
		<div className="progress-group-feedback">
			<svg
				className="lexicon-icon lexicon-icon-check-circle"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#check-circle" />
			</svg>
		</div>
	</div>
</div>
<div className="progress-group">
	<div className="progress-group-addon">
		<div className="progress-group-feedback">
			<svg
				className="lexicon-icon lexicon-icon-check-circle"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#check-circle" />
			</svg>
		</div>
	</div>
	<div className="progress">
		<div
			aria-valuenow="100"
			aria-valuemin="0"
			aria-valuemax="100"
			className="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 className="progress-group progress-group-stacked">
	<div className="progress-group-addon">60% Completed</div>
	<div className="progress">
		<div
			aria-valuenow="60"
			aria-valuemin="0"
			aria-valuemax="100"
			className="progress-bar"
			role="progressbar"
			style={{width: '60%'}}
		></div>
	</div>
	<div className="progress-group-addon">
		<svg
			className="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 className="progress">
	<div
		className="bg-success progress-bar progress-bar-striped"
		style={{width: '25%'}}
	>
		25%
	</div>
	<div className="bg-success progress-bar" style={{width: '25%'}}>25%</div>
	<div
		className="bg-success progress-bar progress-bar-animated progress-bar-striped"
		style={{width: '25%'}}
	>
		25%
	</div>
</div>
<div className="progress">
	<div className="bg-info progress-bar progress-bar-striped" style={{width: '50%'}}>
		50%
	</div>
	<div className="bg-info progress-bar" style={{width: '50%'}}>50%</div>
</div>
<div className="progress">
	<div
		className="bg-warning progress-bar progress-bar-animated progress-bar-striped"
		style={{width: '33%'}}
	>
		33%
	</div>
	<div
		className="bg-warning progress-bar progress-bar-striped"
		style={{width: '33%'}}
	>
		33%
	</div>
</div>
<div className="progress">
	<div className="bg-danger progress-bar" style={{width: '45%'}}>45%</div>
	<div
		className="bg-danger progress-bar progress-bar-animated progress-bar-striped"
		style={{width: '45%'}}
	>
		45%
	</div>
</div>
<div className="progress">
	<div className="progress-bar" style={{width: '10%'}}>10%</div>
	<div className="bg-warning progress-bar" style={{width: '10%'}}>10%</div>
	<div className="bg-success progress-bar" style={{width: '10%'}}>10%</div>
	<div className="bg-info progress-bar" style={{width: '10%'}}>10%</div>
	<div
		className="bg-success progress-bar progress-bar-striped"
		style={{width: '10%'}}
	>
		10%
	</div>
	<div
		className="bg-danger progress-bar progress-bar-animated progress-bar-striped"
		style={{width: '10%'}}
	>
		10%
	</div>
	<div
		className="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 className="progress">
	<div
		className="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 className="progress">
	<div
		className="progress-bar progress-bar-striped"
		role="progressbar"
		style={{width: '10%'}}
		aria-valuenow="10"
		aria-valuemin="0"
		aria-valuemax="100"
	></div>
</div>
<div className="progress">
	<div
		className="progress-bar progress-bar-striped bg-success"
		role="progressbar"
		style={{width: '25%'}}
		aria-valuenow="25"
		aria-valuemin="0"
		aria-valuemax="100"
	></div>
</div>
<div className="progress">
	<div
		className="progress-bar progress-bar-striped bg-info"
		role="progressbar"
		style={{width: '50%'}}
		aria-valuenow="50"
		aria-valuemin="0"
		aria-valuemax="100"
	></div>
</div>
<div className="progress">
	<div
		className="progress-bar progress-bar-striped bg-warning"
		role="progressbar"
		style={{width: '75%'}}
		aria-valuenow="75"
		aria-valuemin="0"
		aria-valuemax="100"
	></div>
</div>
<div className="progress">
	<div
		className="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 className="progress">
	<div
		className="progress-bar progress-bar-striped progress-bar-animated"
		role="progressbar"
		aria-valuenow="75"
		aria-valuemin="0"
		aria-valuemax="100"
		style={{width: '75%'}}
	></div>
</div>

Edit this page on GitHub

Contributors

Matuzalém Teles

Last edited January 29, 2025 at 1:34:39 AM

Table of Contents

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