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 


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

Contextual alternatives MDB Pro component

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


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

Prealoaders MDB Pro component

Infinite loading


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

Circles MDB Pro component 


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

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

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

Crazy circles


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

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

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

Multicolor


<progress-spinner spinnerType="big"></progress-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 add it to yourapp.module and the base index.html.


import { NgSpinningPreloader } from './typescripts/pro/preloader/preloaderService';

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

App.component.ts


import {
  Component,
  OnInit
} from '@angular/core';
import {NgSpinningPreloader} from 'Your_path_to/typescripts/pro/preloader/preloaderService';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})

export class AppComponent implements OnInit {
  constructor(private ngSpinningPreloader: NgSpinningPreloader) {}

  ngOnInit() {
    this.ngSpinningPreloader.stop();
  }
}

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 class="circle-clipper right"> 
                  <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 class="circle-clipper right"> 
                  <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 class="circle-clipper right"> 
                  <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 class="circle-clipper right"> 
                  <div class="circle"> </div> 
                </div> 
              </div> 
              
        </div>     
    </div>