extends ../../_layout/default.pug
block canonical
link(rel='canonical' href='https://coreui.io/docs/components/progress/')
block breadcrumb
+breadcrumb(
[
{ href: '#', label: 'Home'},
{ label: 'Components'},
{ label: 'Base'},
'Progress'
],
)
block view
+docs-components('https://coreui.io/docs/components/progress/')
.row
.col-12
.card.mb-4
.card-header
strong Progress
span.small.ms-1 Basic example
.card-body
p.text-body-secondary.small
| Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use
a(href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress')
| the HTML5
code
= '<progress>'
| element
| , ensuring you can stack progress bars, animate them, and place text labels over them.
+example('https://coreui.io/docs/components/progress/#how-it-works')
.progress
.progress-bar(role='progressbar' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100')
.progress
.progress-bar(role='progressbar' style='width: 25%' aria-valuenow='25' aria-valuemin='0' aria-valuemax='100')
.progress
.progress-bar(role='progressbar' style='width: 50%' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100')
.progress
.progress-bar(role='progressbar' style='width: 75%' aria-valuenow='75' aria-valuemin='0' aria-valuemax='100')
.progress
.progress-bar(role='progressbar' style='width: 100%' aria-valuenow='100' aria-valuemin='0' aria-valuemax='100')
p.text-body-secondary.small
| Bootstrap provides a handful of
a(href='https://coreui.io/docs/utilities/sizing/') utilities for setting width
| . Depending on your needs, these may help with quickly configuring progress.
+example('https://coreui.io/docs/components/progress/#how-it-works')
.progress
.progress-bar.w-75(role='progressbar' aria-valuenow='75' aria-valuemin='0' aria-valuemax='100')
.col-12
.card.mb-4
.card-header
strong Progress
span.small.ms-1 Labels
.card-body
p.text-body-secondary.small
| Add labels to your progress bars by placing text within the
code .progress-bar
| .
+example('https://coreui.io/docs/components/progress/#labels')
.progress
.progress-bar(role='progressbar' style='width: 25%;' aria-valuenow='25' aria-valuemin='0' aria-valuemax='100') 25%
.col-12
.card.mb-4
.card-header
strong Progress
span.small.ms-1 Height
.card-body
p.text-body-secondary.small
| We only set a
code height
| value on the
code .progress
| , so if you change that value the inner
code .progress-bar
| will automatically resize accordingly.
+example('https://coreui.io/docs/components/progress/#height')
.progress(style='height: 1px;')
.progress-bar(role='progressbar' style='width: 25%;' aria-valuenow='25' aria-valuemin='0' aria-valuemax='100')
.progress(style='height: 20px;')
.progress-bar(role='progressbar' style='width: 25%;' aria-valuenow='25' aria-valuemin='0' aria-valuemax='100')
.col-12
.card.mb-4
.card-header
strong Progress
span.small.ms-1 Backgrounds
.card-body
p.text-body-secondary.small
| Use background utility classes to change the appearance of individual progress bars.
+example('https://coreui.io/docs/components/progress/#backgrounds')
.progress
.progress-bar.bg-success(role='progressbar' style='width: 25%' aria-valuenow='25' aria-valuemin='0' aria-valuemax='100')
.progress
.progress-bar.bg-info(role='progressbar' style='width: 50%' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100')
.progress
.progress-bar.bg-warning(role='progressbar' style='width: 75%' aria-valuenow='75' aria-valuemin='0' aria-valuemax='100')
.progress
.progress-bar.bg-danger(role='progressbar' style='width: 100%' aria-valuenow='100' aria-valuemin='0' aria-valuemax='100')
.col-12
.card.mb-4
.card-header
strong Progress
span.small.ms-1 Multiple bars
.card-body
p Include multiple progress bars in a progress component if you need.
+example('https://coreui.io/docs/components/progress/#multiple-bars')
.progress
.progress-bar(role='progressbar' style='width: 15%' aria-valuenow='15' aria-valuemin='0' aria-valuemax='100')
.progress-bar.bg-success(role='progressbar' style='width: 30%' aria-valuenow='30' aria-valuemin='0' aria-valuemax='100')
.progress-bar.bg-info(role='progressbar' style='width: 20%' aria-valuenow='20' aria-valuemin='0' aria-valuemax='100')
.col-12
.card.mb-4
.card-header
strong Progress
span.small.ms-1 Striped
.card-body
p.text-body-secondary.small
| Add
code .progress-bar-striped
| to any
code .progress-bar
| to apply a stripe via CSS gradient over the progress bar’s background color.
+example('https://coreui.io/docs/components/progress/#striped')
.progress
.progress-bar.progress-bar-striped(role='progressbar' style='width: 10%' aria-valuenow='10' aria-valuemin='0' aria-valuemax='100')
.progress
.progress-bar.progress-bar-striped.bg-success(role='progressbar' style='width: 25%' aria-valuenow='25' aria-valuemin='0' aria-valuemax='100')
.progress
.progress-bar.progress-bar-striped.bg-info(role='progressbar' style='width: 50%' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100')
.progress
.progress-bar.progress-bar-striped.bg-warning(role='progressbar' style='width: 75%' aria-valuenow='75' aria-valuemin='0' aria-valuemax='100')
.progress
.progress-bar.progress-bar-striped.bg-danger(role='progressbar' style='width: 100%' aria-valuenow='100' aria-valuemin='0' aria-valuemax='100')
.col-12
.card.mb-4
.card-header
strong Progress
span.small.ms-1 Animated stripes
.card-body
p.text-body-secondary.small
| The striped gradient can also be animated. Add
code .progress-bar-animated
| to
code .progress-bar
| to animate the stripes right to left via CSS3 animations.
+example('https://coreui.io/docs/components/progress/#animated-stripes')
.progress
.progress-bar.progress-bar-striped(role='progressbar' aria-valuenow='75' aria-valuemin='0' aria-valuemax='100' style='width: 75%')
button#btnToggleAnimatedProgress.btn.btn-secondary.mt-3(type='button' data-coreui-toggle='button' aria-pressed='false' autocomplete='off')
| Toggle animation
