Pace.js load progress bar for Ember apps, incl. initial scripts lazy loading
Using latest Ember-cli, run the command:
ember install ember-cli-pace
or for older versions:
npm install ember-cli-pace && ember g pace
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.
All options, excluding color
and theme
related to the addon, are documented on http://github.hubspot.com/pace/.
var ENV = {
pace: {
// addon-specific options to configure theme
theme: 'minimal',
color: 'blue',
// pace-specific options
// learn more on http://github.hubspot.com/pace/#configuration
// and https://github.com/HubSpot/pace/blob/master/pace.coffee#L1-L72
catchupTime: 50,
initialRate: .01,
minTime: 100,
ghostTime: 50,
maxProgressPerFrame: 20,
easeFactor: 1.25,
startOnPageLoad: true,
restartOnPushState: true,
restartOnRequestAfter: 500,
target: 'body',
elements: {
checkInterval: 100,
selectors: ['body', '.ember-view']
},
eventLag: {
minSamples: 10,
sampleCount: 3,
lagThreshold: 3
},
ajax: {
trackMethods: ['GET', 'POST', 'DELETE', 'OPTIONS'],
trackWebSockets: true,
ignoreURLs: []
}
}
};
This addon is bundled with Material spinner theme, which is set by default. See it on demo page.
Pace.js originally provides 14 progress bar themes in 10 colors. See the progress bars and spinners in action: http://github.hubspot.com/pace/docs/welcome/
More details on Pace events, methods and configuration could be found on http://github.hubspot.com/pace/
git clone
this repositoryyarn install
ember server
- Visit your app at http://localhost:4200.
For more information on using ember-cli, visit http://www.ember-cli.com/.