Ember.js route progress with NProgress.js

Add simple visual progress bars to your route transitions by using NProgress.js

First, install NProgress with Bower:

$ bower install nprogress --save

And import it in your Brocfile.js by appending these two lines:

app.import('bower_components/nprogress/nprogress.js')
app.import('bower_components/nprogress/nprogress.css')

Then create a new mixin:

$ ember g mixin loading-indicator

Open up app/mixins/loading-indicator.js and add the following code:

/* globals NProgress */
import Ember from 'ember'

NProgress.configure({ showSpinner: false })

export default Ember.Mixin.create({
  actions: {
    loading() {
      NProgress.start()
      this.router.one('didTransition', () => NProgress.done())
      return true
    }
  , error() {
      NProgress.done()
      return true
    }
  }
})

Once the mixin is created, use it in each resource loading route like this:

import Ember            from 'ember'
import LoadingIndicator from 'yourproject/mixins/loading-indicator'

export default Ember.Route.extend(LoadingIndicator, {
  model() {
    return Ember.$.get('/my/data.json')
  }
})

Your Ember application now has nice loading bars on top of your document.