Pour mettre en place un indicateur de chargement de page sur un portail ServiceNow, ou de redirection, nous allons utiliser les évenements fournis par AngularJs.
Voici un exemple de code, côté client script, qui se déclenche lorsque l’utilisateur est redirigé vers une nouvelle page :
$scope.$on("$locationChangeStart", function handleUnloadEvent(event) {
// Trigger your action
$scope.loading = true;
});
Une fois que la redirection est terminée, vous pouvez utiliser le code si dessous pour cacher votre indicateur de chargement.
$scope.$on("$locationChangeSuccess", function handleUnloadEvent(event) {
$scope.loading = false;
});
Vous n’avez plus qu’à modifier la partie html pour afficher le l’indicateur de chargement :
Code HTML
<div ng-show="loading" class="loading-container">
<div>
${Loading}..
</div>
</div>
Code CSS
.loading-container{
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.5);
z-index:10;
>div{
display: inline-flex;
color: white;
height: 100%;
width: 100%;
justify-content: center;
align-items:center;
}
}
