Introducing the angular-modal-progress-bar

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.

angular-modal-progress-bar

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

Then inject '500tech.modal-progress-bar' in your main app module, passing options to the Loader service:

# 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

Ilya Gelman

Ilya writes advanced single-page web-applicatons at 500Tech using AngularJS, ReactJS and Rails. He adores simplicity and aesthetics in code and interfaces.

  • Ramat Gan, Israel