Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vectart/ember-cli-pace
Pace.js load progress bar for Ember apps, incl. Flash-like initial script lazy loading
https://github.com/vectart/ember-cli-pace
ember ember-apps ember-cli ember-cli-pace javascript pace spinner
Last synced: 1 day ago
JSON representation
Pace.js load progress bar for Ember apps, incl. Flash-like initial script lazy loading
- Host: GitHub
- URL: https://github.com/vectart/ember-cli-pace
- Owner: vectart
- License: mit
- Created: 2015-04-06T22:15:25.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2020-06-05T07:24:49.000Z (over 4 years ago)
- Last Synced: 2025-01-16T07:12:33.574Z (8 days ago)
- Topics: ember, ember-apps, ember-cli, ember-cli-pace, javascript, pace, spinner
- Language: JavaScript
- Homepage: http://vectart.github.io/ember-cli-pace/
- Size: 194 KB
- Stars: 124
- Watchers: 5
- Forks: 31
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# [Pace.js](http://github.hubspot.com/pace/docs/welcome/) load progress bar for Ember apps, incl. initial scripts lazy loading
[](https://npmjs.org/package/ember-cli-pace) [](https://codeclimate.com/github/vectart/ember-cli-pace) [](http://emberobserver.com/addons/ember-cli-pace) [](https://david-dm.org/vectart/ember-cli-pace)
# [Demo ➜](http://vectart.github.io/ember-cli-pace/)
## Installation
Using latest Ember-cli, run the command:
`ember install 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`.
```html
```
Therefore, the scripts will be loaded via AJAX, which allows to [compute loaded vs total bytes ratio](https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress). If your scripts are located on separate host, please note CORS policy.
## Configuration
All options, excluding `color` and `theme` related to the addon, are documented on [http://github.hubspot.com/pace/](http://github.hubspot.com/pace/#configuration).
```javascript
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: []
}
}
};
```
## Themes
This addon is bundled with Material spinner theme, which is set by default. See it on [demo page](http://vectart.github.io/ember-cli-pace/).
Pace.js originally provides [14 progress bar themes](https://github.com/HubSpot/pace/tree/master/themes/black) in [10 colors](https://github.com/HubSpot/pace/tree/master/themes). See the progress bars and spinners in action: http://github.hubspot.com/pace/docs/welcome/
## Pace API
More details on Pace events, methods 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/](http://www.ember-cli.com/).