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

Downloads in past


2.0.06 years ago10 years agoMinified + gzip package size for ember-cli-loading-slider in KB


A loading indicator component for EmberJS that animates across the top of the viewport.
Live Demo
Build Status


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;

    user.save().finally(function() {
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.

Service API

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)



Copyright (c) 2014 Jerel Unruh
Licensed under the MIT license