Good day, how can we achieve some loading effect in angular 4 for every API or HTTP request rendered every 1 minute? something like this https://github.com/pleerock/ngx-progress-bar ? i want to build my own custom loading effect using angular 4.
Add a comment
|
1 Answer
Add following html to inside the body tag of index.html
<body>
<div id="preloader" class="loader" style="display: none">
<div class="d-flex align-items-center" style="height: 100%;">
<div class="loader-content" title="0">
Progress Bar Loading ....
</div>
</div>
</div>
<app-root class="">Loading...</app-root>
</body>
instead of Progress bar loading text you can use any html to show your progress bar html. Keep it hidden using style="display: none"
Write a service to show and hide the preloader div as follows.
import { Injectable } from '@angular/core';
@Injectable()
export class PreloaderService {
static showPreLoader() {
document.getElementById('preloader').style.display = 'block';
}
static hidePreLoader() {
document.getElementById('preloader').style.display = 'none';
}
}
Use it as follows inside your components.
import { PreloaderService } from '../../../shared/services/preloader.service';
This service has two static methods, use to show and hide preloader. No needs to give this service as a constructor parameter to use those methods.
Just before the HTTP request
Show
PreloaderService.showPreLoader();
After got the result
Hide
PreloaderService.hidePreLoader();
1 Comment
Janith Widarshana
I've used it and working fine. If it works for you please vote me up ;)