Angular Bootstrap Progress Bar

Angular 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

Angular 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





        
            
          <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <br>
          <div class="progress">
            <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <br>
          <div class="progress">
            <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <br>
          <div class="progress">
            <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <br>
          <div class="progress">
            <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
          </div>

Material progress bar MDB Pro component

Material Design styling for Bootstrap Progress Bar component

        
            
          <mdb-progress value="0" min="0" max="100" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></mdb-progress>
          <mdb-progress value="25" min="0" max="100" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></mdb-progress>
          <mdb-progress value="50" min="0" max="100" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></mdb-progress>
          <mdb-progress value="75" min="0" max="100" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></mdb-progress>
          <mdb-progress value="100" min="0" max="100" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></mdb-progress>

Height

Set a height styles on the .progress and .progress-bar.

Material progress bar MDB Pro component 

        
            
          <mdb-progress value="25" min="0" max="100" type="success" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></mdb-progress>
        
        
    
        
            
          .progress-bar, .progress {
            height: 20px !important;
          }

Labels

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

Material progress bar MDB Pro component

25% 
        
            
          <mdb-progress value="25" min="0" max="100" type="success" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</mdb-progress>
        
        
    
        
            
          .progress-bar, .progress {
            height: 20px !important;
          }

Contextual alternatives

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

Contextual alternatives of progress bar MDB Pro component 

        
            
          <mdb-progress value="25" min="0" max="100" type="success" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></mdb-progress>
          <mdb-progress value="50" min="0" max="100" type="info" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></mdb-progress>
          <mdb-progress value="75" min="0" max="100" type="warning" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></mdb-progress>
          <mdb-progress value="100" min="0" max="100" type="danger" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></mdb-progress>

Prealoaders

Infinite loading MDB Pro component 

        
            
          <mdb-progress-bar class="progress primary-color-dark" mode="indeterminate"></mdb-progress-bar>

Circles

Basic circles MDB Pro component 

        
            
          <!--Big blue-->
          <mdb-spinner spinnerType="big" spinnerColor="blue"></mdb-spinner>

          <!--Medium red-->
          <mdb-spinner spinnerColor="red"></mdb-spinner>

          <!--Small yellow-->
          <mdb-spinner spinnerType="small" spinnerColor="yellow"></mdb-spinner>

Multicolor MDB Pro component 

        
            
          <mdb-spinner spinnerType="big"></mdb-spinner>

Preloading script MDB Pro component

Click the button below to see Preloading Script in action

Live demo

Usage

Adding preloader to your project


In order to have working preloaders on every component in your project, you need to perform those 3 steps:

  1. Add MDBSpinningPreloader to app.module.ts,
  2. Configure your app.component.ts file by adding MDBSpinningPreloader service to it,
  3. Add preloader HTML markup to index.html file between <body></body> tags, above main component (default <app-root></app-root>).

1st step - app.module.ts 
        
            
            import { MDBSpinningPreloader } from 'ng-uikit-pro-standard';

            @NgModule({
              ...
              providers: [MDBSpinningPreloader],
              ...
            })
2nd step - app.component.ts 
        
            
            import { Component, OnInit } from '@angular/core';
            import {MDBSpinningPreloader} from 'ng-uikit-pro-standard';
            @Component({
              selector: 'app-root',
              templateUrl: 'app.component.html'
            })

            export class AppComponent implements OnInit {
              constructor(private mdbSpinningPreloader: MDBSpinningPreloader) {}

              ngOnInit() {
                this.mdbSpinningPreloader.stop();
              }
            }
3rd step - index.html 
        
            
            <div class="spinning-preloader-container">
              <div class="preloader-wrapper big active">
                <div class="spinner-layer spinner-blue">
                  <div class="circle-clipper left">
                    <div class="circle"> </div>
                  </div>
                  <div class="gap-patch">
                    <div class="circle"> </div>
                  </div>
                </div>

                <div class="spinner-layer spinner-red">
                  <div class="circle-clipper left">
                    <div class="circle"> </div>
                  </div>
                  <div class="gap-patch">
                    <div class="circle"> </div>
                  </div>
                </div>

                <div class="spinner-layer spinner-yellow">
                  <div class="circle-clipper left">
                    <div class="circle"> </div>
                  </div>
                  <div class="gap-patch">
                    <div class="circle"> </div>
                  </div>
                </div>

                <div class="spinner-layer spinner-green">
                  <div class="circle-clipper left">
                    <div class="circle"> </div>
                  </div>
                  <div class="gap-patch">
                    <div class="circle"> </div>
                  </div>
                </div>
              </div>
            </div>

Angular Progress Bar - API

In this section you will find informations about required modules and available inputs of progress bar component.

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors. 

        
            
        import { WavesModule, PreloadersModule, ProgressbarModule, MdProgressBarModule } from 'ng-uikit-pro-standard'
Import example Modules list

Components

ProgressSpinnerComponent

Selector: mdb-spinner

Type: ProgressSpinnerComponent

ProgressbarComponent

Selector: mdb-progress

Type: ProgressbarComponent

Inputs

ProgressSpinnerComponent
Name Type Default Description Example
spinnerType string ' ' Allow to set size of a spinner. Values are big and small. spinnerType="small"
spinnerColor string rainbow Allow to set color of a spinner. Values are green, blue, yellow, red, rainbow. spinnerColor="red"
ProgressbarComponent
Name Type Default Description Example
max number - maximum total value of progress element. max="100"
type string - Provide one of the four supported contextual classes: `success`, `info`, `warning`, `danger`. type="success"
value number - Current value of progress bar. value="50"

Below classes can be used in spinner loader component (circles).

Name Type Usage
.spinner-blue color class <div class="spinner-layer spinner-blue"></div>
.spinner-red color class <div class="spinner-layer spinner-red"></div>
.spinner-yellow color class <div class="spinner-layer spinner-yellow"></div>
.spinner-green color class <div class="spinner-layer spinner-green"></div>
.spinner-primary-color color class <div class="spinner-layer spinner-primary-color"></div>
.*-only color class prefix <div class="spinner-layer spinner-primary-color-only"></div>
.small size class <div class="preloader-wrapper small active"></div>
(blank) - default size size class <div class="preloader-wrapper active"></div>
.big size class <div class="preloader-wrapper big active"></div>