Sous Aurelia lorsque vous naviguez ou chargez une ressource il est bien de faire patienter l’utilisateur avec une animation bloquant l’interface.
Le composant « nprogresse » permet de faire cela.

Installation de « nprogress »

Installer « nprogress » dans votre projet Aurelia

npm install nprogress --save

Configuration de « nprogress » sous Aurelia

Dans le dossier « src/resources/elements » créez le fichier « loading-indicator.js » avec le script suivant :

import * as nprogress from 'nprogress';
import {bindable, noView} from 'aurelia-framework';
import 'nprogress/nprogress.css';
@noView
export class LoadingIndicator {
      @bindable loading = false;
      loadingChanged(newValue) {
        if (newValue) {
            nprogress.start();
        } else {
            nprogress.done();
        }
      }
}

Ce code crée un composant HTML « loading-indicator » non relié à une vue (de même non), mais important une feuille de style « nprogress/nprogress.css ».

Définissez le plug-in dans le fichier « resources/index.js » en ajoutant :

 import {PLATFORM} from 'aurelia-framework';
  
  export function configure(config) {
    config.globalResources([PLATFORM.moduleName('./elements/loading-indicator')]);
  }

Positionner le composant HTML de nprogress dans la page HTML principale « App.html »  en ajoutant le code suivant :

<loading-indicator loading.bind="router.isNavigating || context.isRequesting"></loading-indicator>

Pour activer ce composant il  suffit de mettre a « true » la variable de « context.isRequesting », on d’appeler la méthode « nprogress.start() ». Une barre bleue de progression s’affichera en haut.

Pour le cacher, appelez-la méthode « nprogress.stop(); »

Personnalisation de la barre de progression

Vous pouvez changer le style de la barre de progression en ajout le code suivant dans votre fichier style CSS principale :

#nprogress {
      display: block;
      position: fixed;
      z-index: 1030;
      left: 0;
      top:  0;
      right: 0;
      bottom: 0;
      opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
    background-color: #fff;
}
#nprogress .bar {
      height : 8px;
}
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 50%;
}