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

UX by Octobot on Instagram
Octobot’s design team launched a new Instagram profile exclusively to talk about UX/UI.

What Is the Value of UX in a Software Development Project?
Octobot’s Design Lead talks about the value that UX brings to businesses. In this interview, she tells us how the UX focus impacts software projects.