Sometimes you want to show a more informative progress bar than just a thin YouTube-style line (see angular-loading-bar), but either you cannot or do not want to calculate the real progress.
If you know the approximate time it should take to process a request, you may find our angular-modal-progress-bar useful.
It allows you to declare states with the approximate duration that it takes to process them and phrases that you want to show while the process is happening.
To install it, run:
> bower install angular-modal-progress-bar
'500tech.modal-progress-bar' in your main app module, passing options to the
# CoffeeScript: @app = angular.module('App', ['500tech.modal-progress-bar']) app.run (Loader) -> Loader.states = availableFlights: duration: 10 # in seconds phrases: [ 'Connecting to flight companies' 'Checking dates' 'Finding best prices' ] purchaseTicket: duration: 6 # in seconds phrases: [ 'Checking billing information' 'Contacting chosen company' 'Reserving your seats' 'Finalizing' ]
After that, you have to add
<progress-modal></progress-modal> to your index.html and tell the Loader service to show the progress for the specific state:
app.controller 'FlightsIndexController', (Flight, Loader) -> # ... code omitted ... Loader.start('availableFlights') Flight.checkAvailableFor(dates).success -> # ... code omitted ... Loader.end()
Sometimes it is useful to call
Loader.end() in another controller so that the modal will disappear only when another state is loaded.
You can also automatically stop the loader with an $http interceptor if you get an error from the server:
app.config ($httpProvider) -> $httpProvider.interceptors.push ($q, Loader) -> responseError: (rejection) -> Loader.end() $q.reject(rejection)
Github repository: angular-modal-progress-bar