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}}
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 eitherisLoadedchanges tofalseor it reaches 100% of the viewport width. This option is only valid for the simple stripe animation.
- An approximate duration of the event in milliseconds. Defaults to
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. Ifexpandingis set totruethencoloris required and must be an array of colors.
- A css color to use for the animation stripe. Defaults to
expanding- Set this to
trueto change the style of animation from a simple stripe to a more complex animation (see the demo).
- Set this to
speed- Set the speed of the expanding style animation. Defaults to
1000. Only valid whenexpandingis true.
- Set the speed of the expanding style animation. Defaults to
For advanced usage you may interact directly with the service instead of or in
addition to using the loading-slider component.
startLoadingendLoadingchangeAttrs(attrs)
Copyright (c) 2014 Jerel Unruh
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent