Topic: Progress Bar/Preloder-spinners
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.
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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