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%;
}
