ember-cli-pace

Pace.js load progress bar for Ember apps, incl. initial scripts lazy loading

Demo

Installation

Using latest Ember-cli, run the command:

ember install:addon ember-cli-pace

or for older versions:

npm install ember-cli-pace && ember g pace

Flash-like initial script loading

Due to application scripts loading may take some time (especially, using mobile networks or ADSL), Ember-cli-pace can load them asynchronously displaying correctly computed progress bar. To enable that feature, just change src attribute to pace-src in your app.html.

<script pace-src="assets/vendor.js"></script>
<script pace-src="assets/app.js"></script>

Therefore, the scripts will be loaded via AJAX, which allows to compute loaded vs total bytes ratio. If your scripts are located on separate host, please note CORS policy.

Themes

Pace.js provides 14 progress bar themes in 10 colors. See the progress bars and spinners in action: http://github.hubspot.com/pace/docs/welcome/

To configure theme, append few lines to config/environment.js:

var ENV = {
  pace: {
    color: 'red', // default: blue
    theme: 'big-counter' // default: minimal
  }
};

Pace API

More details on Pace API and configuration could be found on http://github.hubspot.com/pace/

Developing ember-cli-pace

• git clone this repository
• npm install
• bower install
• ember server
• Visit your app at http://localhost:4200.

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