Ember-load
A simple loading indicator, while your static assets download, and your Ember.js app starts up.
Installing the Add-on
Configuration & Use
You can customize this addon in your environment/config.js
module.exports = function(environment) {
var ENV = {
'ember-load': {
loadingIndicatorClass: 'ember-load-indicator'
}
...
}
...
}
And then place some HTML in your app/index.html
<div class="ember-load-indicator">
CAN I HAS APP NOW?
</div>
Finally, place the following in your app/templates/application.hbs
{{ember-load-remover}}
The loading indicator will be removed when your application view is inserted into the DOM
But where do I find cool little spinners?!
Anything that's purely CSS or plain JavaScript should work beautifully. You'll have the best luck with things that require no scripts or assets (i.e., images) to run in the browser.
Advanced Usage
You may also override or extend the default "load indicator removal" hook, by creating a component in your app called ember-load-remover
app/components/ember-load-remover.js
import EmberLoadRemover from 'ember-load/components/ember-load-remover';
export default EmberLoadRemover.extend({
removeLoadingIndicator() {
this._super(...arguments);
console.log('Just so you know, your app has loaded. 🚀');
}
});
Compatibility
This add-on can be used with or without Ember.View
s
Ember Version Range | Notes |
---|
>= 1.11 | Can be used with Ember.View, or using the component ({{ember-load-remover}} ) |
2.0 - 2.4 | Can be used with Ember.View (via ember-legacy-views), or using the component ({{ember-load-remover}} ) |
>= 2.5 | Must be used via component ({{ember-load-remover}} ), as ember-legacy-views is not compatible with Ember 2.5 |
Contributing
git clone
this repositorynpm install
bower install
Running
Running Tests
ember test
ember test --server
Building
For more information on using ember-cli, visit http://www.ember-cli.com/.