Sign in


Sign up


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 value={0}></Progress>
<Progress value={25}></Progress>
<Progress value={50}></Progress>
<Progress value={75}></Progress>
<Progress value={100}></Progress>
            

Contextual alternatives MDB Pro component

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

                
<Progress value={25} color="success"></Progress>
<Progress value={50} color="info"></Progress>
<Progress value={75} color="warning" animated></Progress>
<Progress value={100} color="danger" striped></Progress>