Ember-load

A simple loading indicator, while your static assets download, and your Ember.js app starts up.

Installing the Add-on

• ember install ember-load

Configuration & Use

You can customize this addon in your environment/config.js

module.exports = function(environment) {
  var ENV = {
    // optional
    'ember-load': {
      // This is the default value, if you don't set this option
      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.

• Spinkit
• Single Element CSS Loaders
• css-spinners.com
• CSS-only loaders
• Tim Holman's Loaders and Spinners Collection
• cssload.net

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() {
    // Perform default behavior
    this._super(...arguments);
    // Do something custom in addition to it
    console.log('Just so you know, your app has loaded. 🚀');
  }
});

Compatibility

This add-on can be used with or without Ember.Views

Contributing

• git clone this repository
• npm install
• bower install

Running

• ember server
• Visit your app at http://localhost:4200.

Running Tests

• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.