Angular 2+ Application pre loader with percentage indicator

Question

Does anyone know the good solution for implementing Angular 2+ pre loader with percentage indicator ( Similar to Gmail's loading screen )?

I know that usual way is to add <div> inside our <app-root> and style it, maybe even add CSS animations and it will be replaced by app content once app is loaded.

But... What I am actually looking is to display animated splash screen ( SVG or whatever else ) where after animation completes loading bar should appear and show progress status.

At first point I was thinking about separate splash component that will be only component eagerly loaded and from there load all other modules but if I map that component to '/' how to display it on any other route as a first ( starting point ). Also, this means that Angular main bundle must be already loaded so this is not a good option.

Most likely this question is too broad and not suitable for Stack Overflow but I can't find anywhere a good solution for this. :(

Is there a way to load plain JavaScript without Angular that will load Angular and display progress? Or any other ( better ) idea?

This must be achievable since whole Gmail is Angular app and they have it :D

Answer 1

maybe my answer is a little late, but you can check this tutorial, i think it's very realistic and useful implementation:

Implementing Simble PRogress Bar Angular/Server side

Answer 2

You may try ngx-progressbar, it is really cool. The API is not trivial but well documented, so you may build the progress bar of any complexity.

---

UPD After discussion I would suggest following approach (index.html)

1) Provide progress bar on the html level:

<my-app>
  <div style="width: 100%; background-color: grey;">
    <div id="myProgressBar" style="width: 1%; height: 30px; background-color: green;">
    </div>
  </div>
</my-app>

2) Load your app bundle and inject it into DOM manually via XMLHttpRequest

const tag = document.createElement('script');
const xhr = new XMLHttpRequest();
xhr.open('GET', 'my-angular-app-bundle.js?' + new Date().getTime());
xhr.onloadend = (e) => document.head.appendChild(tag);
xhr.send(); 

3) Use XMLHttpRequest.onprogress to watch the progress and to update progress bar params

const barElement = document.getElementById('myProgressBar');
xhr.onprogress = (e) => {
  if (e.lengthComputable) {
    const width = 100 * e.loaded / + e.total;
    barElement.style.width = width + '%';
  }
}

To make onprogress updates smoother you may increment progress bar width in a setInterval loop:

if (e.lengthComputable) {
  const endWidth = 100 * e.loaded / + e.total;
  const intervalId = setInterval(() => {
    const width = parseInt(barElement.style.width, 10);
    if (width >= endWidth) {
      clearInterval(intervalId);
    } else {
      width += 2; 
      barElement.style.width = width + '%'; 
    }
  }, 40);
}

Answer 3

I have used PACE in my angular app to show the progress bar for the splash screen. You can also show as you want. You need to go through with below link:

Automatic page load progress bar

Hope it will help you.

Answer 4

I don't think that loading indicator shows the loading of the app. I think it shows the loading of the data after the app has loaded. Think of data like mails, contacts, etc... I think that gmail loading is split in two parts.

Part 1: Show a simple animation (without loading indicator) while that app itself starts.

Part 2: Now the app has started keep displaying that loading annimation. Next, inventorise how many data requests you need to make and add a loading bar for this.

You can use this for the startup annimation.

Answer 5

Sometimes tag-based loading is more efficient, you could use PreloadJS library. You could also manually track end of script loading using onload event and artificially interpolate progress to make impression that app is loading at constant speed. Gmail probably does not show actual progress at all, it just waits end of loading displaying fake steady progress using timers.