Clay
Skip to ContentClayClay by Liferay
  • Get Started
    • Introduction
    • What is Clay
    • Importing the JS Component
    • Using JS Components with Metal.js
    • Web Components
  • Foundations
    • Grid
    • Typography
  • Lexicon Core Components
    • Alerts
    • Badges
    • Buttons
    • Cards
    • Charts
      • Advanced Examples
        • Axis Label
        • Axis Range
        • Data Color
        • Gridlines
        • Predictive forecasting
        • Regions
        • X Axis Tick Formatting
      • Basic Examples
        • Bar Chart
        • Bubble Chart
        • Combination Chart
        • Donut Chart
        • Gauge Chart
        • Geomap Chart
        • Line Chart
        • Pie Chart
        • Scatter Chart
        • Spline Chart
        • Step Chart
    • Dataset Display
    • Dropdown Menu
    • Forms
      • Checkbox, Radio, and Toggle
      • Forms
      • Forms Hierarchy
      • Forms Navigation
      • Multi Step Form
      • Multi Step Form Simplified
      • Selectors
      • Text Input
      • Text Input Group
      • Text Input Localizable
      • Text Input Variations
    • Icons
    • Labels
    • Link
    • List
    • Loading Indicator
    • Modals
    • Navigation
      • Breadcrumbs
      • Navigation Bar
      • Vertical Navigation
    • Pagination
    • Popovers and Tooltips
    • Progress Bars
    • Sidebar
      • Info Panel
    • Stickers
    • Table
      • Inline Edit Table
      • Table
    • Tabs
    • Toolbars
      • Management Toolbar
  • CSS Framework
    • SCSS
    • Class Helpers
    • Satellite Components
      • Alerts
      • Badges
      • Button Group
      • Cards
      • Dropdown Menu
      • Forms
        • Form Elements
        • Form Elements (Input Groups)
        • Form Elements (Validation)
      • Images (Aspect Ratios)
      • Images and Thumbnails
      • Labels
      • Links
      • List Groups
      • Modals
      • Nav
      • Navigation
        • Header
      • Paginations
      • Panels
      • Popovers and Tooltips
      • Progress Bars
      • Stickers
      • Tables
      • Tbar (Toolbar)
      • Timelines
      • Toggle Switch
    • Page Examples
      • Card View Template
      • Document Upload
      • List View Template
      • Table View Template
      • Users and Organizations
  • News

Progress Bars

Progress Groups

Add the progress-group and progress-group-addon classes to a progress component to place an addon on either side of it.

30%
70%
<!-- Progress group with default progress bar -->

<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>

<!-- Progress group with warning progress bar -->

<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>

<!-- Progress Group with progress bar success and a group-addon -->

<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>

<!-- Progress Group with default progress success and a group-addon -->

<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>

Progress Group Stacked

Add the progress-group-stacked class to a progress-group element to 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-check-cog" focusable="false" role="presentation">
			<use href="/images/icons/icons.svg#check-cog" />
		</svg>
	</div>
</div>

Progress Variants

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

The variant classes set the background-color for a progress-bar, so Bootstrap 4 background utility classes are not required.
Progress
25%
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>

<!-- Progress Success -->

<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>

<!-- Progress Info -->

<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>

<!-- Progress Warning -->

<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>

<!-- Progress Danger -->

<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>
Progress 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-exclamation-circle" focusable="false" role="presentation">
				<use href="/images/icons/icons.svg#exclamation-circle" />
			</svg>
		</div>
	</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%
<!-- Progress with bg-success -->
<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>

<!-- Progress with bg-info -->
<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>

<!-- Progress with bg-warning -->
<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>

<!-- Progress with bg-danger -->
<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>

Progress Sizes

Normal
25%
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>
Large
45%
60%
<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>

Progress with Bootstrap 4 Background Utility

60% (Success)
100% (Info)
40% (Warning)
80% (Danger)
<!-- Progress with bg-success -->
<div class="progress">
	<div aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" class="bg-success progress-bar" role="progressbar" style="width: 60%;">60% (Success)</div>
</div>

<!-- Progress with bg-info -->
<div class="progress">
	<div aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" class="bg-info progress-bar" role="progressbar" style="width: 100%;">100% (Info)</div>
</div>

<!-- Progress with bg-warning -->
<div class="progress">
	<div aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" class="bg-warning progress-bar" role="progressbar" style="width: 40%;">40% (Warning)</div>
</div>

<!-- Progress with bg-danger -->
<div class="progress">
	<div aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" class="bg-danger progress-bar" role="progressbar" style="width: 80%;">80% (Danger)</div>
</div>

Except as otherwise noted, the content of this site is licensed under CC BY-SA 4.0 license.