Progress

Progress bars indicate loading states or static states of how far a user is along in a process.

Material Progress Web Component

The linear progress web component from Material Web Components offers extended functionality past the browser defaults. As a web component, the code has been condensed into an easy to use, custom element.

Default

The material web component uses the progress="{number}" attribute to determine the amount of the progress bar to fill where number is any number between 0 and 1.

<mwc-linear-progress progress="0"></mwc-linear-progress>
<mwc-linear-progress progress="0.25"></mwc-linear-progress>
<mwc-linear-progress progress="0.50"></mwc-linear-progress>
<mwc-linear-progress progress="0.75"></mwc-linear-progress>
<mwc-linear-progress progress="1"></mwc-linear-progress>

mwc-linear-progress(progress='0')
mwc-linear-progress(progress='0.25')
mwc-linear-progress(progress='0.50')
mwc-linear-progress(progress='0.75')
mwc-linear-progress(progress='1')

Indeterminate

An indeterminate progress state exists within the web component which can be used by adding the indeterminate attribute.

<mwc-linear-progress indeterminate></mwc-linear-progress>

mwc-linear-progress(indeterminate)

Buffer

The buffer="{number}" attribute can be used with the progress attribute to set a buffer effect on the progress bar where number is any number between 0 and 1.

<mwc-linear-progress progress="0" buffer="0"></mwc-linear-progress>
<mwc-linear-progress progress="0.25" buffer="0.25"></mwc-linear-progress>
<mwc-linear-progress progress="0.5" buffer="0.75"></mwc-linear-progress>

mwc-linear-progress(progress='0', buffer='0')
mwc-linear-progress(progress='0.25', buffer='0.25')
mwc-linear-progress(progress='0.5', buffer='0.75')

Reversed

The reverse attribute can be used to reverse the direction of the progress bar direction as well.

<mwc-linear-progress progress="0" buffer="0" reverse="reverse"></mwc-linear-progress>
<mwc-linear-progress progress="0.25" buffer="0.25" reverse="reverse"></mwc-linear-progress>
<mwc-linear-progress progress="0.5" buffer="0.75" reverse="reverse"></mwc-linear-progress>

mwc-linear-progress(progress='0', buffer='0', reverse)
mwc-linear-progress(progress='0.25', buffer='0.25', reverse)
mwc-linear-progress(progress='0.5', buffer='0.75', reverse)

Bootstrap Progress

The Bootstrap progress component uses a modified version of the browser default. The styling has been modified further to match the Material Design specifications for their linear progress component.

Default Progress

By default, the progress bar uses the primary theme color. The markup requires the use of inline CSS to set the width of the progress bar within the progress container.

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

.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')

Labels

Progress labels can be added to the bar by adding text within the .progress-bar element.

25%

50%

75%

100%

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

.progress
    .progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100') 25%
.progress
    .progress-bar(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100') 50%
.progress
    .progress-bar(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100') 75%
.progress
    .progress-bar(role='progressbar', style='width: 100%', aria-valuenow='100', aria-valuemin='0', aria-valuemax='100') 100%

Height

By setting the height of the outer .progress element, the entire component will resize. This can be done using inline CSS, as in the example below, or by creating a custom class.

Note that using a height of 0.25rem matches the Material Design styling specifications for their linear progress component.

<div class="progress" style="height: 1px;">
    <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 0.25rem;">
    <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 1.25rem;">
    <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

.progress(style='height: 1px;')
    .progress-bar(role='progressbar', style='width: 25%;', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
.progress(style='height: 0.25rem;')
    .progress-bar(role='progressbar', style='width: 50%;', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100')
.progress(style='height: 1.25rem;')
    .progress-bar(role='progressbar', style='width: 75%;', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')

Color

Use background utilities on the .progress-bar element to set the background color of the filled portion of the progress bar.

<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar bg-secondary" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar bg-success" role="progressbar" style="width: 45%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar bg-danger" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar 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 bg-info" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>

.progress
    .progress-bar(role='progressbar', style='width: 15%', aria-valuenow='15', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.bg-secondary(role='progressbar', style='width: 30%', aria-valuenow='30', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.bg-success(role='progressbar', style='width: 45%', aria-valuenow='45', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.bg-danger(role='progressbar', style='width: 60%', aria-valuenow='60', 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-info(role='progressbar', style='width: 90%', aria-valuenow='90', aria-valuemin='0', aria-valuemax='100')

Multiple Bars

Multiple bars within the same progress element is supported.

<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

.progress
    .progress-bar(role='progressbar', style='width: 15%', aria-valuenow='15', aria-valuemin='0', aria-valuemax='100')
    .progress-bar.bg-warning(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')

Striped

The .progress-bar-striped class can be added to the progress bar for an alternate stiped styling effect.

<div class="progress">
    <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-striped bg-secondary" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 45%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 60%" aria-valuenow="60" 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-info" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>

.progress
    .progress-bar.progress-bar-striped(role='progressbar', style='width: 15%', aria-valuenow='15', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.progress-bar-striped.bg-secondary(role='progressbar', style='width: 30%', aria-valuenow='30', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.progress-bar-striped.bg-success(role='progressbar', style='width: 45%', aria-valuenow='45', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.progress-bar-striped.bg-danger(role='progressbar', style='width: 60%', aria-valuenow='60', 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-info(role='progressbar', style='width: 90%', aria-valuenow='90', aria-valuemin='0', aria-valuemax='100')

Animated

The .progress-bar-animated class can be added to a striped progress bar to activate an animation on the bar.

<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-secondary" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 45%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated 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 progress-bar-animated bg-info" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>

.progress
    .progress-bar.progress-bar-striped.progress-bar-animated(role='progressbar', style='width: 15%', aria-valuenow='15', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.progress-bar-striped.progress-bar-animated.bg-secondary(role='progressbar', style='width: 30%', aria-valuenow='30', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.progress-bar-striped.progress-bar-animated.bg-success(role='progressbar', style='width: 45%', aria-valuenow='45', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.progress-bar-striped.progress-bar-animated.bg-danger(role='progressbar', style='width: 60%', aria-valuenow='60', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.progress-bar-striped.progress-bar-animated.bg-warning(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.progress-bar-striped.progress-bar-animated.bg-info(role='progressbar', style='width: 90%', aria-valuenow='90', aria-valuemin='0', aria-valuemax='100')