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.
Indeterminate
An indeterminate progress state exists within the web component which can be used by adding the
indeterminate
attribute.
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.
Reversed
The
reverse
attribute can be used to reverse the direction of the progress bar direction as well.
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.
Labels
Progress labels can be added to the bar by adding text within the
.progress-bar
element.
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.
Color
Use
background utilities
on the
.progress-bar
element to set the background color of the filled portion of the progress bar.
Multiple Bars
Multiple bars within the same progress element is supported.
Striped
The
.progress-bar-striped
class can be added to the progress bar for an alternate stiped styling effect.
Animated
The
.progress-bar-animated
class can be added to a striped progress bar to activate an animation on the bar.
Related Links
Docs for Material's linear progress web component
Bootstrap's progress documentation page