Show progress bar while webpack chunks load on Browser

I develop an angular 2 application with webpack and I want to show progress bar when webpack chunks are loading on browser to show client some thing on progress.I put loading notification when I hit API for GET/POST data but I did not know how I show loading bar when browser load application chunks.


I used get/post api requests in a Service and Mapped it using 'Observable'. You have to subscribe it in the component where you are using that particular service.

You can put progress bar or any text using this 'subscribe' method as the 3rd argument will execute once it will finish loading your data.

You can get help from this code:

In place of 'Loading is in progress...' you can put your progress bar's code visibility.

export class MyApp {

private data: Observable<Array<number>>;
private values: Array<number> = [];
private anyErrors: boolean;
private finished: String;

constructor() {

init() {
  this.finished = "Loading is in progress....."; = new Observable(observer => {
      setTimeout(() => {
      }, 1000);

      setTimeout(() => {
      }, 2000);

      setTimeout(() => {
      }, 3000);

  let subscription =
      value => this.values.push(value),
      error => this.anyErrors = true,
      () => this.finished = "Loading completed!!"



 ? How to put method in Backgroundworker
 ? What is a NullPointerException, and how do I fix it?
 ? Why not showing progressBar in Android Studio?
 ? Tiny Circular ProgressBar inside Edittext on the left side
 ? Powershell Script to delete files not in a list with progress bar
 ? xamarin forms rounded edge progress bar and gradient color
 ? How Do I Stop Progress Bar in Custom Action in Wix Installer Closing the Dialog Box
 ? Make a BackgroundWorker so ProgressBar will work
 ? Displaying progressbar for file upload
 ? .NET Progressbar looks different in the designer than it does when program is running