A loading indicator component for EmberJS that animates across the top of the viewport.
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.
Copyright (c) 2014 nGen Works Company and contributors