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.


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.


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


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.


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.


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



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.


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.


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


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

Related Links