Bootstrap Progress Bar

Putting loads of content on your website usually results in increasing its loading time. This may lead to wrecking your User Experience, increasing abandonment rate or lowering your position in search engines.

That’s why you should always provide your user with appropriate feedback.

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”


Basic example MDB Pro component

                
<progress-wrapper>
  <progress-bar :value="0"></progress-bar>
</progress-wrapper>
<progress-wrapper>
  <progress-bar :value="25"></progress-bar>
</progress-wrapper>
<progress-wrapper>
  <progress-bar :value="50"></progress-bar>
</progress-wrapper>
<progress-wrapper>
  <progress-bar :value="75"></progress-bar>
</progress-wrapper>
<progress-wrapper>
  <progress-bar :value="100"></progress-bar>
</progress-wrapper>

<script>
import { Container, Row, Column, ProgressWrapper, ProgressBar } from 'mdbvue';

export default {
    name: 'ProgressBarsProPage',
    components: {
    Container,
    Row,
    Column,
    ProgressWrapper,
    ProgressBar
    }
};
</script>

            

Height MDB Pro component

Set a height value on the progress-wrapper.

                
<progress-wrapper :height="20">
    <progress-bar :value="25" color="danger"></progress-bar>
</progress-wrapper>
                
            

Labels MDB Pro component

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

25%
                
<progress-wrapper :height="20">
    <progress-bar :value="25" color="danger">25%</progress-bar>
</progress-wrapper>
                
            

Contextual alternatives MDB Pro component

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

                
<progress-wrapper>
  <progress-bar color="success" :value="25"></progress-bar>
</progress-wrapper>
<progress-wrapper>
  <progress-bar color="info" :value="50"></progress-bar>
</progress-wrapper>
<progress-wrapper>
  <progress-bar color="warning" :value="75" striped animated></progress-bar>
</progress-wrapper>
<progress-wrapper>
  <progress-bar color="danger" :value="100" striped></progress-bar>
</progress-wrapper>
                
            

Striped MDB Pro component

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

                
<progress-wrapper>
    <progress-bar :value="50" striped />
</progress-wrapper>
                
            

Animated stripes MDB Pro component

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

                
<progress-wrapper>
    <progress-bar :value="50" striped animated />
</progress-wrapper>
                
            

Preloaders MDB Pro component

Infinite loading

                            
<progress-wrapper color="primary-color-dark">
    <progress-bar indeterminate />
</progress-wrapper>
                            
                            

Circles MDB Pro component

                
<row>
    <column sm="4">
        <preloader big />
    </column>
    <column sm="4">
        <preloader color="red" />
    </column>
    <column sm="4">
        <preloader small color="yellow" />
    </column>
</row>

<script>
import { Container, Row, Column, ProgressWrapper, ProgressBar, Preloader } from 'mdbvue';

export default {
  name: 'ProgressBarsProPage',
  components: {
    Container,
    Row,
    Column,
    ProgressWrapper,
    ProgressBar,
    Preloader
  }
};
</script>
                
            

Crazy circles

                            
<row>
    <column sm="4">
        <preloader big crazy />
    </column>
    <column sm="4">
        <preloader color="red" crazy />
    </column>
    <column sm="4">
        <preloader small color="yellow" crazy />
    </column>
</row>
                            
                            

Multicolor

                            
<row>
    <column sm="4">
        <preloader multicolor big />
    </column>
</row>