A loading indicator component for EmberJS that animates across the top of the viewport.

Live Demo

npm install ember-cli-loading-slider --save-dev

Add the component to your application template:

{{loading-slider isLoading=loading duration=250}}

Create an application controller and add the following actions to your application route:

actions: {
  loading: function() {
    var controller = this.controllerFor('application');
    controller.set('loading', true);
    this.router.one('didTransition', function() {
      controller.set('loading', false);
    });
  },
  finished: function() {
    this.controllerFor('application').set('loading', false);
  }
}

The animation will now show when the user navigates between routes that return a promise (such as this.store.find()).

You may also show or hide the animation at any time from any route or controller:

actions: {
  saveUser: function(user) {
    var self = this;

    self.send('loading');
    user.save().finally(function() {
      self.send('finished');
    });
  }
}

• isLoading
• A boolean property that the component observes to determine if it should display or hide.
• duration
• An approximate duration of the event in milliseconds. Defaults to 300. Once 75% of this specified duration passes (or if the animation reaches 66% of the viewport width the animation slows until either isLoaded changes to false or it reaches 100% of the viewport width.
• color
• A css color to use for the animation stripe. Defaults to red. Can also be set with your application's css by setting the background-color of .loading-slider > span.

• Jerel Unruh

Copyright (c) 2014 nGen Works Company and contributors

Licensed under the MIT license