Angular 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


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

Contextual alternatives MDB Pro component

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


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

Modifying height and adding text MDB Pro component

Here's easiest way to change height of progress bar and place text into it.


Greeb
Blue
Orange
Red


// Add this code to global style.scss stylesheet
.progress-bar, .progress {
    height: 15px !important;
}

Imitation of loading progress MDB Pro component

Imitates a charging progress bar. It can be used in the application prototype.


{{value}} %


import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'loading-bar',
  templateUrl: './loading-bar.component.html',
  styleUrls: ['./loading-bar.component.scss'],
})
export class LoadingBarComponent implements AfterViewInit {
  value = 0;
  ngAfterViewInit() {
    const loadingBar = setInterval(() => {
      this.value < 100 ? this.value++ : clearInterval(loadingBar);
    }, 50);
  }
}


.progress-bar, .progress {
    height: 15px !important;
}

Prealoaders MDB Pro component

Infinite loading


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

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>

Crazy circles


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

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

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

Multicolor


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

Simple usage MDB Pro component

Simple example showing, how could you use our preloaders in your real application.



  
    
      Your version is up to date.
      Last update check on:
        {{today}}
      
    

    
      
        Comparing versions...


import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'preloader-usage',
  templateUrl: './preloader-usage.component.html',
  styleUrls: ['./preloader-usage.component.scss']
})
export class PreloaderUsageComponent implements OnInit {
  visible: boolean = true;
  date = new Date();
  today = this.date.getDate() + '/' +  (this.date.getMonth() + 1) + '/' + this.date.getFullYear();

  ngOnInit() {
    setTimeout(() => {
      this.visible = false;
    }, 3000);

  }
}

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:

Add MDBSpinningPreloader to app.module.ts,
Configure your app.component.ts file by adding MDBSpinningPreloader service to it,
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-mdb-pro';

@NgModule({
...
providers: [MDBSpinningPreloader],
...
})

2nd step - app.component.ts


import { Component, OnInit } from '@angular/core';
import {MDBSpinningPreloader} from 'ng-mdb-pro';
@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>

Configuration options

Preloading spinner can be configured in below way:

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>`
.crazy	speed class	`<div class="preloader-wrapper crazy active"></div>`

API Reference:

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.

API Reference for MDB Angular Preloaders:

// For MDB Angular Pro
import { WavesModule, PreloadersModule } from 'ng-uikit-pro-standard'

Import example Modules list