Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • How to Read This Documentation
    • Composition Philosophy
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
K
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Progress Bar

yarn add @clayui/progress-bar

Progress bar indicates the percentage completed of a task.

  • Examples
  • Markup
  • API

Stable3.65.0View in LexiconCHANGELOGstorybook demos

  • 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%
25%
50%
75%
100%
Copied!
Code Sample (expand to see it)
<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%
Copied!
Code Sample (expand to see it)
<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%
Copied!
Code Sample (expand to see it)
<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%
Copied!
Code Sample (expand to see it)
<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
Copied!
Code Sample (expand to see it)
<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%
25%
25%
50%
50%
33%
33%
45%
45%
10%
10%
10%
10%
10%
10%
10%
Copied!
Code Sample (expand to see it)
<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%
Copied!
Code Sample (expand to see it)
<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.

Copied!
Code Sample (expand to see it)
<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.

Copied!
Code Sample (expand to see it)
<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>

How can this be improved? Create an issue!