Progress Bar/Preloder-spinners


Topic: Progress Bar/Preloder-spinners

Aroquiassamy LA ROZE pro premium asked 2 years ago

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

<mdb-progress-bar>

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


Damian Gemza staff answered 2 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.

.html:

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

.ts:

visibleProgressBar = true;

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

Best Regards,

Damian


Please insert min. 20 characters.
Status

Resolved

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