CODEWITHSUNDEEP
angularlazy-loading
Jydon Mah
Jydon Mah

Reputation: 383

Create progress bar loading effect for every HTTP request

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.

Upvotes: 2

Views: 1306

Answers (1)

Janith Widarshana
Janith Widarshana

Reputation: 3483

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();

Upvotes: 3

Related Questions