Vue Progress - free examples & tutorial (original) (raw)

Vue Bootstrap 5 Progress component

Documentation and examples for using custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.

Basic example

How it works

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t usethe HTML5 element, ensuring you can stack progress bars, animate them, and place text labels over them.

• We use the MDBProgress as a wrapper to indicate the max value of the progress bar.
• We use the inner MDBProgressBar to indicate the progress so far.
• Widht of the MDBProgressBar can be set with value prop.
• The MDBProgressBar has automatically added role andaria attributes to make it accessible.

Put that all together, and you have the following examples.

MDB provides a handful ofutilities for setting width. Depending on your needs, these may help with quickly configuring progress.

Labels

Add labels to your progress bars by placing text within theMDBProgress.

To make the label visible you need to set a proper height to the bar.

Height

We only set a height value on the MDBProgress, so if you change that value the inner MDBProgressBar will automatically resize accordingly.

Colors

Use background utility classes to change the appearance of individual progress bars.

Multiple bars

Include multiple progress bars in a progress component if you need.

Striped

Add striped to any MDBProgressBar to apply a stripe via CSS gradient over the progress bar’s background color.

Animated stripes

The striped gradient can also be animated. Addanimated to MDBProgressBar to animate the stripes right to left via CSS3 animations.

Progress Circular

Add circular prop to MDBProgress and set value prop to show progress value in circular mode. Only one MDBProgressBar is allowed in this mode.