Vue Bootstrap Progress Bar

Vue Progress Bar - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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 :height="20" :value="0" />
            <mdb-progress :height="20" :value="25" color="blue" />
            <mdb-progress :height="20"  :value="50" color="blue" />
            <mdb-progress :height="20"  :value="75" color="blue" />
            <mdb-progress :height="20"  :value="100" color="blue" />
          </mdb-container>
        </template>
      
        
    
        
            
        <script>
          import { mdbContainer, mdbProgress } from 'mdbvue';
          export default {
            name: 'ProgressPage',
            components: {
              mdbContainer,
              mdbProgress
            }
          }
        </script>

Material progress bar MDB Pro component

Material Design styling for Bootstrap Progress Bar component.

        
            
        <template>
          <mdb-container>
            <mdb-progress :value="0" />
            <mdb-progress :value="25" />
            <mdb-progress :value="50" />
            <mdb-progress :value="75" />
          </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.

Material progress bar MDB Pro component 

        
            
        <template>
          <mdb-container>
            <mdb-progress :value="25" :height="20" />
          </mdb-container>
        </template>
      
        
    
        
            
        <script>
          import { mdbContainer, mdbProgress } from 'mdbvue';
          export default {
            name: 'ProgressProPage',
            components: {
              mdbContainer,
              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 :height="20" :value="25">25%</mdb-progress>
          </mdb-container>
        </template>
      
        
    
        
            
        <script>
          import { mdbContainer, mdbProgress } from 'mdbvue';
          export default {
            name: 'ProgressProPage',
            components: {
              mdbContainer,
              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 :value="25" color="danger">25%</mdb-progress>
            <mdb-progress :value="50" color="warning">50%</mdb-progress>
            <mdb-progress :value="75" color="success">75%</mdb-progress>
          </mdb-container>
        </template>
      
        
    
        
            
        <script>
          import { mdbContainer, mdbProgress } from 'mdbvue';
          export default {
            name: 'ProgressProPage',
            components: {
              mdbContainer,
              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 :height="20" :value="50" color="warning" striped />
          </mdb-container>
        </template>
      
        
    
        
            
        <script>
          import { mdbContainer, mdbProgress } from 'mdbvue';
          export default {
            name: 'ProgressProPage',
            components: {
              mdbContainer,
              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 :value="50" color="warning" striped animated />
          </mdb-container>
        </template>
      
        
    
        
            
        <script>
          import { mdbContainer, mdbProgress } from 'mdbvue';
          export default {
            name: 'ProgressProPage',
            components: {
              mdbContainer,
              mdbProgress
            }
          }
        </script>

Preloaders

Click the button below to see Preloading Script in action

Infinite loading MDB Pro component 

        
            
        <template>
          <mdb-container>
            <mdb-progress bgColor="primary-color-dark" indeterminate />
          </mdb-container>
        </template>
      
        
    
        
            
        <script>
          import { mdbContainer, mdbProgress } from 'mdbvue';
          export default {
            name: 'ProgressProPage',
            components: {
              mdbContainer,
              mdbProgress
            }
          };
        </script>

Circles

Use the border spinners for a lightweight loading indicator.

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

You can use multicolor text color utilities on the standard spinner.

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

Preloading script

Click the button below to see Preloading Script in action

Preloading script MDB Pro component

Live demo

Usage

1. Import mdbPreloadingScript component and place it at the top of your code.

        
            
        <template>
          <mdb-container>
            <mdb-preloading-script :loading="loading"/>
            <!-- page content -->
          </mdb-container>
        </template>
      
        
    
        
            
        <script>
          import { mdbPreloadingScript, mdbContainer } from 'mdbvue';
          export default {
            components: {
              mdbPreloadingScript,
              mdbContainer
            }
          }
        </script>

The script runs until your page is fully loaded.

2. bind loading property to your data and add event listener:

        
            
        <template>
          <mdb-container>
            <mdb-preloading-script :loading="loading"/>
            <!-- page content -->
          </mdb-container>
        </template>
      
        
    
        
            
        <script>
          import { mdbPreloadingScript, mdbContainer } from 'mdbvue';
          export default {
            components: {
              mdbPreloadingScript,
              mdbContainer
            },
            data(){
              return {
                loading: true
              }
            },
            methods: {
              isLoaded() {
                this.loading = false;    
              }
            },
            mounted(){
              window.addEventListener("load", this.isLoaded);
            },
            beforeDestroy(){
              window.removeEventListener("load", this.isLoaded);
            }
          }
        </script>

3. adjust a loader's appearance, colors and opacity:

        
            
        <template>
          <mdb-container>
            <mdb-preloading-script big multicolor :opacity="0.6" color="elegant" :loading="loading"/>
            <!-- page content -->
          </mdb-container>
        </template>
      
        
    
        
            
        <script>
          import { mdbPreloadingScript, mdbContainer } from 'mdbvue';
          export default {
            components: {
              mdbPreloadingScript,
              mdbContainer
            },
            data(){
              return {
                loading: true
              }
            },
            methods: {
              isLoaded() {
                this.loading = false;    
              }
            },
            mounted(){
              window.addEventListener("load", this.isLoaded);
            },
            beforeDestroy(){
              window.removeEventListener("load", this.isLoaded);
            }
          }
        </script>

Vue 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

        
            
      <script>
        import { mdbProgress } from 'mdbvue';
      </script>

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" />
height Number Changes progress height <mdb-progress :height="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 />

Preloading script API

In this section you will find advanced information about the Preloading script component.

Import statement

        
            
      <script>
        import { mdbPreloadingScript } from 'mdbvue';
      </script>

API Reference: Properties

Name Type Default Description Example
color String 'white' Changes background color <mdb-preloading-script color="default" />
opacity Number 1 Changes opacity of a background <mdb-preloading-script :opacity="0.8" />
big Boolean false Changes spinner's size to big <mdb-preloading-script big />
small Boolean Changes spinner's size to small <mdb-preloading-script small />
crazy Boolean false Changes spinner's animation speed to fast <mdb-preloading-script crazy />
spinnerColor String "blue" Changes spinner's color <mdb-preloading-script color="red" />
multicolor Boolean false Changes spinner's color theme to multicolor <mdb-preloading-script multicolor />
loading Boolean true Preloading script will be visible as long as loading property is set to true <mdb-preloading-script :loading="isLoading" />
animation String 'fadeOut' Changes preloading script's exit animation. List of all animation is available here <mdb-preloading-script animation="fadeOutLeft" />