Progress Bar/Preloder-spinners

Topic: Progress Bar/Preloder-spinners

Aroquiassamy LA ROZE pro premium priority asked 3 years ago

Hi @Damian, Actually I used spinner as a pre-loader in my project it works well.But I want to use


as a page loader as you seen in Google/Youtube at top of NAVIGATION, could you tell me how to implement it instead of a SPINNER.

Damian Gemza staff answered 3 years ago

Dear Aroquissamy LA ROZE,

Unfortunately, for mdb-progress-bar there's no global service from which you can show/hide it.

But you can achieve this behavior by using *ngIf to determine when mdb-progress-bar should be visible.

Please take a look at below code. This is a simulation of 3s loading content, and then progress bar is hiding.


<div class="row">
  <div class="col-md-6 mx-auto my-5">
    <mdb-progress-bar *ngIf="visibleProgressBar" class="progress primary-color-dark" mode="indeterminate"></mdb-progress-bar>


visibleProgressBar = true;

  ngAfterViewInit() {
    setTimeout(() => {
      this.visibleProgressBar = false;
    }, 3000);

Best Regards,


Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 7.0.0
  • Device: Desktop-Lenova
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No