Get better UX with Angular loading-bar
When we started on zealpath, one of the most important aspects to care was the UX.
Once the user started to use the app, we needed to give him some feedback about the status of his actions: the search of cases, the autocomplete of strengths by elasticsearch, files uploads, posting cases, etc.
We wanted to use something more elegant and dainty than a spinner, so we bet to use chieffancypants’s solution: angular-loading-bar.
The solution is simple, add a cool loading-bar/progress-bar on top of the page whenever an XHR request goes out in Angular. There is no need to set the value of loading-bar manually, so you don’t have to care of maintaining the bar status. This becomes complicated when you have a very large application with several services all making independent XHR requests.
Pros:
- Make it automatic.
- No need to maintain the state of the loading bar.
- There’s no complicated setup.
- Can be styled via external CSS (not inline).
- It’s Cool.
Usage:
- Install it:
bower install -s angular-loading-bar
- Include it as a dependency for your app. You can also use it together with
ngAnimate
(optional) :angular.module('myApp', ['angular-loading-bar', 'ngAnimate'])
Include the supplied JS and CSS file (or create your own CSS):
- You are done!
Advanced:The directive have the possibility to add or remove a spinner, also the progress-bar:
angular.module('myApp', ['angular-loading-bar'])
.config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
cfpLoadingBarProvider.includeSpinner = true; // or not
cfpLoadingBarProvider.includeBar = false; // or not
}])
If you’d like ignore certain requests, you can do it easy:
// ignore a particular $http GET:
$http.get('/cases', {
ignoreLoadingBar: true
});
// ignore a particular $http POST.
$http.post('/millennial', data, {
ignoreLoadingBar: true
});
Also, if you wish to use the loading-bar without the interceptor
, you can do it. Simply include the loading bar service as a dependency instead of the main angular-loading-bar
module and use the set of functions:
angular.module('myApp', ['cfp.loadingBar'])
cfpLoadingBar.start(); // will insert the loading bar into the DOM. Start in 1%.
cfpLoadingBar.inc(); // increments the loading bar by a random amount.
cfpLoadingBar.set(0.3) // Set the loading bar to 30%
cfpLoadingBar.status() // Returns the loading bar's progress. -> 0.3
cfpLoadingBar.complete() // Set the loading bar's progress to 100%, and then remove it from the DOM.
See related posts

The Importance of User Interviews in UX Design
A crucial process for creating products and services that meet users’ needs and expectations

The Journey From Graphic to UX Designer
We had the pleasure of talking with Doug Powell, design leader with 30+ years of experience in companies such as IBM and Expedia.