Progress Bar

BsProgressBar is bootstrap progress bar component featuring support for animated background and text labels which are typically used for displaying simple progress bar.

Added since v2.0.0

Overview

<bs-progress-bar> is built from Bootstrap progress bar's component. Although it is a simple progress bar, it can be customized with many options to make it look beautiful. For example, the color property can be used to change the bar color. Text label to provide additional information, flexible striped bar color and animated striped bar color.

Value: 25%

TIP

Any MDBootstrap Color variants and Material Color variants can be applied to the color property.

Text Label

<bs-progress-bar> supports text label to provide additional information. It can be created from progress bar value or by providing a custom text label.

Simple

Here the text label is created from the progress bar value and can be enabled by defining the show-value property explicitly and the placement can be change using the value-position property. The valid values for value-position property are start, end, top, bottom, inside (default).

Added since v2.0.3

70%

Value Position

Value: 70%

Custom

Here the text label is created from a custom text by providing a simple text to the label property. The placement can be change using the label-position property. The valid values for label-position property are top (default), bottom, start, end.

Added since v2.0.10

Marketing Progress

80%

Label Position

Value: 80%

Styling

Thickness

The progress bar thickness can be adjust by using the height property.

Stripes

Stripes progress bar can be enabled by defining the striped property explicitly and sets the stripes color using the color property.

Animated Stripes

Animated stripes progress bar can be enabled by defining the striped and striped-animation property explicitly and sets the stripes color using the color property.

Advanced Example

The following is an example that demonstrate more advanced use of <bs-progress-bar>.

Dashboard - Revenue

By Location

New York

72k

San Fransisco

39k

Sydney

25k

Singapore

61k

CSS Variables

The component css variables inherited from Bootstrap Progress.

Updated on v2.0.10

--bs-progress-height: 1rem;
--bs-progress-font-size: 0.75rem;
--bs-progress-bg: #e9ecef;
--bs-progress-bar-color: #fff;
--bs-progress-bar-bg: #0d6efd;
--bs-progress-bar-transition: width 0.6s ease;
--bs-progress-border-radius: 0.375rem;
--bs-progress-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);

// custom variables
--md-progress-color: currentColor;
--md-progress-font-size: .75rem;
--md-progress-label-font-size: .825rem;
--md-progress-label-font-weight: 600;

API Reference

Property	Type	Default	Description
color	String		The control bar color appearance. Any of MDBootstrap Colors variant or Material Color variants can be applied.
height	Number		Progress bar thickness.
inner-cls	String		Optional, control bar css classes. v2.0.10
label	String		The ProgressBar text label. v2.0.10
label-alignment	String	'center'	The ProgressBar text label alignment. Valid values are: start, end, center. v2.0.10
label-position	String	'top'	The ProgressBar label position. Valid values are: top, bottom, start, end. v2.0.10
model-value v-model	Number	0	The value monitored by v-model to control the progress bar value.
rounded-off	Boolean	false	Remove the rounded side border of the progress bar. v2.0.10
striped	Boolean	false	Create striped progress bar.
striped-animation	Boolean	false	Create animated stripe progress bar.
show-value	Boolean	false	Display progress bar value as text label or not.
value-position	String	'inside'	Adjust text label placement. Valid values are: inside, top, bottom, start, end. v2.0.3