Ember-cli-loading-slider NPM

Loading-slider

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

Installation

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

Usage

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.

API

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.