ember-cli-pace

2019-08-22

Pace.js load progress bar for Ember apps, incl. Flash-like initial script lazy loading

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

DownloadsCode ClimateEmber Observer ScoreDavid Dependencies

Demo ➜

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 srcattribute to pace-srcin 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.

Configuration

All options, excluding colorand themerelated to the addon, are documented on http://github.hubspot.com/pace/.

var ENV = {
  pace: {

    // addon-specific options to configure theme
    theme: 'material',
    color: 'blue',

    // pace-specific options
    // learn more on http://github.hubspot.com/pace/#configuration
    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.

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

Pace.js themes

Pace API

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

Developing ember-cli-pace

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

Repository

https://github.com/vectart/ember-cli-pace.git


上一篇:store.pouchdb
下一篇:dmn
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部