ProgressBar

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

Updated in v2.2.0

Overview

<bs-progress-bar> is a lightweight component for displaying simple progress bar. Although it is simple component, 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

%

INFO

• BsProgressBar originally used Bootstrap CSS classes. However, since v2.2.0, BsProgressBar no longer uses Bootstrap CSS. This improvement allows BsProgressBar to work seamlessly with both TailwindCSS and Bootstrap CSS frameworks.
• The bundle only provide contextual color variants. It is located at dist/theme-light.css and dist/theme-dark.css files.

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 in v2.0.3

70%

Value

%

Value Position

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 in v2.0.10

Marketing Progress

80%

Label Position

Value

%

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

Revenue

By Location

New York

72.3 K

San Fransisco

39.1 K

Sidney

25.1 K

Singapore

61.4 K

CSS Variables

As CSS technology evolves, Vue MDBootstrap introduces local CSS variables on .md-progressbar-simple for better customization.

Updated in v2.2.1

.md-progressbar-simple {
  --md-progress-bg: #{vars.$progress-bg};
  --md-progress-bar-bg: #{vars.$progress-bar-bg};
  --md-progress-bar-color: #{vars.$progress-bar-color};
  --md-progress-bar-transition: #{vars.$progress-bar-transition};
  --md-progress-border-radius: #{vars.$progress-border-radius};
  --md-progress-box-shadow: #{vars.$progress-box-shadow};
  --md-progress-color: currentColor;
  --md-progress-font-size: #{vars.$progress-font-size};
  --md-progress-height: #{vars.$progress-height};
  --md-progress-label-font-size: 0.825rem;
  --md-progress-label-font-weight: 600;
}

API Reference

Property	Type	Default	Description
color	String		The control bar color appearance. Any of Colors 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