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-progressbar value="0" min="0" max="100" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></mdb-progressbar>
<mdb-progressbar value="25" min="0" max="100" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></mdb-progressbar>
<mdb-progressbar value="50" min="0" max="100" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></mdb-progressbar>
<mdb-progressbar value="75" min="0" max="100" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></mdb-progressbar>
<mdb-progressbar value="100" min="0" max="100" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></mdb-progressbar>

Contextual alternatives MDB Pro component

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


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

Modifying height and adding text MDB Pro component

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

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

// Add this code to global style.scss stylesheet
.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.


<div class="row">
  <div class="col-12">
    <div class="my-5" *ngIf="!visible">
      <h3 class="h3-responsive text-center">Your version is up to date.</h3>
      <h5 class="h5responsive text-center">Last update check on:
        <code>{{today}}</code>
      </h5>
    </div>

    <div class="view" *ngIf="visible" style="height:100vh; width:100vw; position:fixed; top:0; left:0; z-index:999">
      <div class="mask rgba-black-strong flex-center">
        <p class="white-text">Comparing versions...</p>
        <br>
        <mdb-spinner spinnerType="big"></mdb-spinner>
      </div>
    </div>
  </div>
</div>


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:

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