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

25%
50%
75%
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.

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

Material Linear Progress Web Component Documentation

Docs for Material's linear progress web component

Related Link arrow_upward
Bootstrap Progress Documentation

Bootstrap's progress documentation page

Related Link arrow_upward