Rate this docs

Vue Bootstrap Progress Bar

Vue Progress Bar - Bootstrap 4 & Material Design

Vue Bootstrap progress bar is a component which displays a progress of a process in which user is involved. Their color, shape, and animation can be customized.

If it takes too long for your website to load up, your user will be less stressed about it when he sees a simple progress bar. It means as much as “Everything is fine. The content you want to see will load in a few seconds”


Default progress bar

Default styling for Bootstrap Progress Bar component







        <template>
          <mdb-container>
            <mdb-progress-wrapper class="mt-2" :height="20">
              <mdb-progress :value="0"></mdb-progress>
            </mdb-progress-wrapper>
            <mdb-progress-wrapper class="mt-2" :height="20">
              <mdb-progress :value="25" color="blue"></mdb-progress>
            </mdb-progress-wrapper>
            <mdb-progress-wrapper class="mt-2" :height="20">
              <mdb-progress :value="50" color="blue"></mdb-progress>
            </mdb-progress-wrapper>
            <mdb-progress-wrapper class="mt-2" :height="20">
              <mdb-progress :value="75" color="blue"></mdb-progress>
            </mdb-progress-wrapper>
            <mdb-progress-wrapper class="mt-2" :height="20">
              <mdb-progress :value="100" color="blue"></mdb-progress>
            </mdb-progress-wrapper>
          </mdb-container>
        </template>

        <script>
          import { mdbContainer, mdbProgressWrapper, mdbProgress } from 'mdbvue';

          export default {
            name: 'ProgressPage',
            components: {
              mdbContainer,
              mdbProgressWrapper,
              mdbProgress
            }
          };
        </script>

      

Material progress bar MDB Pro component

Material Design styling for Bootstrap Progress Bar component



        <template>
          <mdb-container>
            <mdb-progress-wrapper>
              <mdb-progress :value="0"></mdb-progress>
            </mdb-progress-wrapper>
            <mdb-progress-wrapper>
              <mdb-progress :value="25"></mdb-progress>
            </mdb-progress-wrapper>
            <mdb-progress-wrapper>
              <mdb-progress :value="50"></mdb-progress>
            </mdb-progress-wrapper>
            <mdb-progress-wrapper>
              <mdb-progress :value="75"></mdb-progress>
            </mdb-progress-wrapper>
            <mdb-progress-wrapper>
              <mdb-progress :value="100"></mdb-progress>
            </mdb-progress-wrapper>
          </mdb-container>
        </template>

        <script>
          import { mdbContainer, mdbProgressWrapper, mdbProgress } from 'mdbvue';

          export default {
            name: 'ProgressProPage',
            components: {
              mdbContainer,
              mdbProgressWrapper,
              mdbProgress
            }
          };
        </script>

      

How it works

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

  • We use the .progress as a wrapper to indicate the max value of the progress bar.
  • We use the inner .progress-bar to indicate the progress so far.
  • The .progress-bar requires an inline style, utility class, or custom CSS to set their width.
  • The .progress-bar also requires some role and aria attributes to make it accessible.

Height

Set a height value on the mdb-progress-wrapper.

Material progress bar MDB Pro component



        <template>
          <mdb-container>
            <mdb-progress-wrapper :height="20">
              <mdb-progress :value="25"></mdb-progress>
            </mdb-progress-wrapper>
          </mdb-container>
        </template>

        <script>
          import { mdbContainer, mdbProgressWrapper, mdbProgress } from 'mdbvue';

          export default {
            name: 'ProgressProPage',
            components: {
              mdbContainer,
              mdbProgressWrapper,
              mdbProgress
            }
          };
        </script>

      

Labels

Add labels to your progress bars by placing text within the mdb-progress.

Material progress bar MDB Pro component

25%


        <template>
          <mdb-container>
            <mdb-progress-wrapper :height="20">
              <mdb-progress :value="25">25%</mdb-progress>
            </mdb-progress-wrapper>
          </mdb-container>
        </template>

        <script>
          import { mdbContainer, mdbProgressWrapper, mdbProgress } from 'mdbvue';

          export default {
            name: 'ProgressProPage',
            components: {
              mdbContainer,
              mdbProgressWrapper,
              mdbProgress
            }
          };
        </script>

      

Contextual alternatives

Progress bars use some of the same button and alert classes for consistent styles.

Contextual alternatives of progress bar MDB Pro component



        <template>
          <mdb-container>
            <mdb-progress-wrapper>
              <mdb-progress color="success" :value="25"></mdb-progress>
            </mdb-progress-wrapper>
            <mdb-progress-wrapper>
              <mdb-progress color="info" :value="50"></mdb-progress>
            </mdb-progress-wrapper>
            <mdb-progress-wrapper>
              <mdb-progress color="warning" :value="75"></mdb-progress>
            </mdb-progress-wrapper>
            <mdb-progress-wrapper>
              <mdb-progress color="danger" :value="100"></mdb-progress>
            </mdb-progress-wrapper>
          </mdb-container>
        </template>

        <script>
          import { mdbContainer, mdbProgressWrapper, mdbProgress } from 'mdbvue';

          export default {
            name: 'ProgressProPage',
            components: {
              mdbContainer,
              mdbProgressWrapper,
              mdbProgress
            }
          };
        </script>

      

Striped

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

Striped progress bar MDB Pro component



        <template>
          <mdb-container>
            <mdb-progress-wrapper>
              <mdb-progress :value="50" striped />
            </mdb-progress-wrapper>
          </mdb-container>
        </template>

        <script>
          import { mdbContainer, mdbProgressWrapper, mdbProgress } from 'mdbvue';

          export default {
            name: 'ProgressProPage',
            components: {
              mdbContainer,
              mdbProgressWrapper,
              mdbProgress
            }
          };
        </script>

      

Animated stripes

The striped gradient can also be animated. Add animated to mdb-progress to animate the stripes right to left via CSS3 animations.

Animated progress bar MDB Pro component



        <template>
          <mdb-container>
            <mdb-progress-wrapper>
              <mdb-progress :value="50" striped animated />
            </mdb-progress-wrapper>
          </mdb-container>
        </template>

        <script>
          import { mdbContainer, mdbProgressWrapper, mdbProgress } from 'mdbvue';

          export default {
            name: 'ProgressProPage',
            components: {
              mdbContainer,
              mdbProgressWrapper,
              mdbProgress
            }
          };
        </script>

      

Prealoaders

Infinite loading MDB Pro component



        <template>
          <mdb-container>
            <mdb-progress-wrapper color="primary-color-dark">
              <mdb-progress indeterminate />
            </mdb-progress-wrapper>
          </mdb-container>
        </template>

        <script>
          import { mdbContainer, mdbProgressWrapper, mdbProgress } from 'mdbvue';

          export default {
            name: 'ProgressProPage',
            components: {
              mdbContainer,
              mdbProgressWrapper,
              mdbProgress
            }
          };
        </script>

      

Circles

Basic circles MDB Pro component



        <template>
          <mdb-container>
            <mdb-row>
              <mdb-col sm="4">
                <mdb-spinner big />
              </mdb-col>
              <mdb-col sm="4">
                <mdb-spinner color="red" />
              </mdb-col>
              <mdb-col sm="4">
                <mdb-spinner small color="yellow" />
              </mdb-col>
            </mdb-row>
          </mdb-container>
        </template>

        <script>
          import { mdbContainer, mdbRow, mdbCol, mdbSpinner } from 'mdbvue';

          export default {
            name: 'ProgressProPage',
            components: {
              mdbContainer,
              mdbRow,
              mdbCol,
              mdbSpinner
            }
          };
        </script>

      

Crazy circles MDB Pro component



        <template>
          <mdb-container>
            <mdb-row>
              <mdb-col sm="4">
                <mdb-spinner big crazy />
              </mdb-col>
              <mdb-col sm="4">
                <mdb-spinner color="red" crazy />
              </mdb-col>
              <mdb-col sm="4">
                <mdb-spinner small color="yellow" crazy />
              </mdb-col>
            </mdb-row>
          </mdb-container>
        </template>

        <script>
          import { mdbContainer, mdbRow, mdbCol, mdbSpinner } from 'mdbvue';

          export default {
            name: 'ProgressProPage',
            components: {
              mdbContainer,
              mdbRow,
              mdbCol,
              mdbSpinner
            }
          };
        </script>

      

Multicolor MDB Pro component



        <template>
          <mdb-container>
            <mdb-row>
              <mdb-col sm="4">
                <mdb-spinner multicolor big />
              </mdb-col>
            </mdb-row>
          </mdb-container>
        </template>

        <script>
          import { mdbContainer, mdbRow, mdbCol, mdbSpinner } from 'mdbvue';

          export default {
            name: 'ProgressProPage',
            components: {
              mdbContainer,
              mdbRow,
              mdbCol,
              mdbSpinner
            }
          };
        </script>
        
      

Progress - API

In this section you will find advanced information about the Progress component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.


Import statement


import { mdbProgress, mdbProgressWrapper } from 'mdbvue';
      

API Reference: Properties

Name Type Default Description Example
tag String 'div' Changes progress tag <mdb-progress tag="p" />
value Number 0 Changes progress value <mdb-progress :value="25" />
color String Changes progress color <mdb-progress color="warning" />
striped Boolean false Adds striped effect <mdb-progress striped />
animated Boolean false Adds animation effect <mdb-progress animated />
indeterminate Boolean false Adds infinite loading <mdb-progress indeterminate />