Skip to content

Instantly share code, notes, and snippets.

@ben-barbier
Last active August 29, 2015 14:26
Show Gist options
  • Save ben-barbier/f225664f4e869fceb788 to your computer and use it in GitHub Desktop.
Save ben-barbier/f225664f4e869fceb788 to your computer and use it in GitHub Desktop.
AngularJS - Loading page with progress bar
(function() {
'use strict';
angular.module('myApp', []);
angular
.module('myApp')
.config(myAppConfig);
myAppConfig.$inject = ['$httpProvider'];
function myAppConfig ($httpProvider) {
$httpProvider.interceptors.push('applicationLoadedHttpInterceptor');
}
})();
(function() {
'use strict';
angular
.module('myApp')
.factory('applicationLoadedHttpInterceptor', applicationLoadedHttpInterceptor);
applicationLoadedHttpInterceptor.$inject = ['$q', '$rootScope', '$timeout'];
function applicationLoadedHttpInterceptor ($q, $rootScope, $timeout) {
var applicationLoaded = false,
requestsCounter = 0,
responsesCounter = 0,
applicationSeemsToBeLoaded;
return {
'request': function(config) {
if (!applicationLoaded) {
requestsCounter++;
if (applicationSeemsToBeLoaded) {
$timeout.cancel(applicationSeemsToBeLoaded);
}
$rootScope.$broadcast('application_loading', {
requests: requestsCounter,
responses: responsesCounter
});
}
return config || $q.when(config);
},
'response': function(response) {
if (!applicationLoaded) {
responsesCounter++;
$rootScope.$broadcast('application_loading', {
requests: requestsCounter,
responses: responsesCounter
});
if (requestsCounter - responsesCounter < 1) {
applicationSeemsToBeLoaded = $timeout(function () {
$rootScope.$broadcast('application_loaded');
applicationLoaded = true;
}, 200);
}
}
return response || $q.when(response);
}
};
}
})();
<!doctype html>
<html>
<head>
</head>
<body data-ng-app="myApp">
<div ng-controller="LoadingPageController">
<div ng-if="!applicationLoaded" class="loadingPage">
<div class="loadingPageLoader">
<md-progress-linear md-mode="determinate" value="{{(responsesCounter / requestsCounter) * 100}}"></md-progress-linear>
<div class="percents" ng-bind-html="(responsesCounter / requestsCounter * 100).toFixed(0) + ' %'"></div>
</div>
<div class="informations">
<img src="common/styles/img/spid-big-logo.png" alt="SPID" />
<div ng-if="proposeReload">
<div style="margin-top: 20px;" ng-bind-html="'MyApp was not successfully loaded...'"></div>
<div style="margin-top: 20px;"><md-button ng-click="reload()" class="md-raised md-primary" ng-bind-html="'Refresh'"></md-button></div>
</div>
</div>
</div>
</div>
</body>
</html>
.loadingPage .loadingPageLoader {
width: 100%;
position: fixed;
z-index: 10001;
top: 0;
margin-top: -5px;
}
.loadingPage .loadingPageLoader .percents {
margin-top: 6px;
position: fixed;
right: 5px;
}
.loadingPage .informations {
width: 100%;
height: 100%;
position: fixed;
z-index: 10000;
background-color: whitesmoke;
top: 0;
text-align: center;
box-shadow: inset 0 0 200px rgba(0, 0, 0, .5);
padding-top: 125px;
}
(function() {
'use strict';
angular
.module('myApp')
.controller('LoadingPageController', LoadingPageController);
LoadingPageController.$inject = ['$scope', '$window', '$timeout'];
function LoadingPageController ($scope, $window, $timeout) {
var loadingProgress;
var INACTIVITY_TO_PROPOSE_RELOAD = 5000;
$scope.applicationLoaded = false;
$scope.requestsCounter = 0;
$scope.responsesCounter = 0;
$scope.proposeReload = false;
function resetWaitingTime () {
if (loadingProgress) {
$timeout.cancel(loadingProgress);
}
loadingProgress = $timeout(function () {
$scope.proposeReload = true;
}, INACTIVITY_TO_PROPOSE_RELOAD);
}
$scope.reload = function () {
$window.location.reload();
};
$scope.$on('application_loaded', function () {
$scope.applicationLoaded = true;
});
$scope.$on('application_loading', function (event, counts) {
resetWaitingTime();
$scope.requestsCounter = counts.requests;
$scope.responsesCounter = counts.responses;
});
}
})();
@fclaeys
Copy link

fclaeys commented Aug 3, 2015

Par contre, tu ne géres pas les retours en erreur.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment