Ember.js route progress with NProgress.js

  • Ember.js
  • howto
  • JavaScript

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:


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() {
      this.router.one('didTransition', () => NProgress.done())
      return true
  , error() {
      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.