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>

Spinner MDB Pro component

Props regarding spinner's speed, color and size can be combined.

<Spinner blue big />
<Spinner red />
<Spinner yellow small />

Crazy Spinner

<Spinner crazy blue big />
<Spinner crazy red />
<Spinner crazy green small />

Multicolor Spinner

<Spinner big multicolor/>