Progress

BsProgress is a component which are typically used to visualize the data loading progress.

Bar

<bs-progress> is typically used to control the visualization of data loading progress. The Bar progress type is the default progress control. The mode property has three valid values, which are: indeterminate (default), determinate, and buffer.

Buffer Mode

The buffer mode can only works for Bar progress type. Sets the mode property to buffer to enable the buffer mode.

Value: 25%

Buffer: 50%

Thickness

Use height property to sets the Bar progress thickness.

Spinner

The Spinner progress type can be enabled by using type property sets to spinner.

Size and Thickness

Use diameter property to set the Spinner size and stroke property to set its thickness.

Colors

You can change the color of Bar or Spinner progress using the color property. Any MDBootstrap Color variants can be applied to the color property.

API Reference

Property	Type	Default	Description
buffer	Number	0	Progress bar buffer length.
color	String	'primary'	The component color appearance. Any of MDBootstrap Colors variant can be applied.
diameter	Number	60	Spinner diameter value.
height	Number	5	Progress bar thickness.
mode	String	'indeterminate'	Progress control mode, valid values are: determinate, indeterminate, buffer.
model-value v-model	Number	0	The value monitored by v-model to control the progress value. v2.0.0
stroke	Number	6	Spinner thickness.
type	String	'bar'	ProgressControl type, valid values are: spinner, bar.