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}}

Alternatively you may try the more complex mode. In this mode an array of colors is required hexColorsArray: ['#000', '#fff']:

{{loading-slider isLoading=loading expanding=true color=hexColorsArray}}

Create application route (if not present) and extend application route with loading-slider mixin:

import Ember from 'ember';
import LoadingSliderMixin from '../mixins/loading-slider';

export default Ember.Route.extend(LoadingSliderMixin, { });

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');
    });
  }
}

For v1.2.x make sure that you have explicitly defined an application controller e.g. app/controllers/application.js to avoid getting an Assertion Failed error.

v1.3.x is implemented as a service and controllers are no longer used.

• 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. This option is only valid for the simple stripe animation.
• 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. If expanding is set to true then color is required and must be an array of colors.
• expanding
  • Set this to true to change the style of animation from a simple stripe to a more complex animation (see the demo).
• speed
  • Set the speed of the expanding style animation. Defaults to 1000. Only valid when expanding is true.

For advanced usage you may interact directly with the service instead of or in addition to using the loading-slider component.

• startLoading
• endLoading
• changeAttrs(attrs)

• Jerel Unruh
• Contributors

Copyright (c) 2014 Jerel Unruh

Licensed under the MIT license