Skip to content
Application loading UI for Ember.js apps
JavaScript HTML Shell
Branch: master
Clone or download

Latest commit

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon fix: ie11-friendly way of removing the loading indicator Dec 14, 2018
app
blueprints/ember-load Update dependencies to enable Greenkeeper 🌴 (#83) May 23, 2017
config fix: shared semantic-release and renovate config Nov 9, 2018
lib fix auto-deploy Aug 25, 2015
tests chore: setTimeout -> run.later for Ember 2.x compatibility Nov 9, 2018
vendor
.editorconfig Update ember-cli (#65) Oct 30, 2016
.ember-cli Initial Commit from Ember CLI v1.13.7 Aug 25, 2015
.eslintignore fix: upgrade ember-cli Nov 9, 2018
.eslintrc.js Avoid NodeList.forEach for ie11 (#135) Dec 5, 2018
.gitignore fix: upgrade ember-cli Nov 9, 2018
.jscsrc Update ember-suave Apr 25, 2016
.npmignore
.template-lintrc.js fix: upgrade ember-cli Nov 9, 2018
.travis.yml chore: replace travis-deploy-once with travis-ci stage (#136) Dec 5, 2018
.watchmanconfig Update ember-cli to 1.13.13 Dec 8, 2015
CHANGELOG.md chore(release): 0.0.17 [skip ci] Jan 30, 2019
LICENSE.md Update dependencies Apr 25, 2016
README.md fix: force release of ie11 fixes Dec 6, 2018
ember-cli-build.js fix: shared semantic-release and renovate config Nov 9, 2018
index.js fix: shared semantic-release and renovate config Nov 9, 2018
package.json chore(deps): commitlint monorepo Feb 8, 2020
renovate.json fix: shared semantic-release and renovate config Nov 9, 2018
testem.js fix: shared semantic-release and renovate config Nov 9, 2018
yarn.lock chore(deps): commitlint monorepo Feb 8, 2020

README.md

Ember-load

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

Build Status Code Climate npm version Ember Observer Score

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.

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

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 repository
  • npm install
  • bower install

Running

Running Tests

  • ember test
  • ember test --server

Building

  • ember build

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

You can’t perform that action at this time.