logo Octobot

Get better UX with Angular loading-bar

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:

  1. Install it: bower install -s angular-loading-bar
  2. Include it as a dependency for your app. You can also use it together with ngAnimate(optional) : angular.module('myApp', ['angular-loading-bar', 'ngAnimate'])

  3. Include the supplied JS and CSS file (or create your own CSS):

     
				
					<link rel='stylesheet' href='build/loading-bar.min.css' type='text/css' media='all' />  
<script type='text/javascript' src='build/loading-bar.min.js'></script>
    1. 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 the demo here.

View on GitHub.

See related posts