All Projects → vectart → Ember Cli Pace

vectart / Ember Cli Pace

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

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Ember Cli Pace

Ember Infinity
⚡️ Simple, flexible Infinite Scroll for Ember CLI Apps.
Stars: ✭ 368 (+187.5%)
Mutual labels:  ember-cli, ember
Mber
Fast and minimal Ember.js CLI alternative, without broccoli.
Stars: ✭ 30 (-76.56%)
Mutual labels:  ember-cli, ember
Ember Engines
Composable Ember applications for ambitious user experiences
Stars: ✭ 484 (+278.13%)
Mutual labels:  ember-cli, ember
Ember Cli Page Object
This ember-cli addon eases the construction of page objects on your acceptance and integration tests
Stars: ✭ 272 (+112.5%)
Mutual labels:  ember-cli, ember
Ember Cli Bundle Analyzer
Analyze the size and contents of your Ember app's bundles
Stars: ✭ 78 (-39.06%)
Mutual labels:  ember-cli, ember
Ember Cli
The Ember.js command line utility
Stars: ✭ 3,314 (+2489.06%)
Mutual labels:  ember-cli, ember
Rfcs
RFCs for changes to Ember
Stars: ✭ 731 (+471.09%)
Mutual labels:  ember-cli, ember
ember-luxon
🕐 🌐 [deprecated] Addon thats brings Luxon to Ember applications.
Stars: ✭ 20 (-84.37%)
Mutual labels:  ember-cli, ember
Ember Cli Coffeescript
Adds precompilation of CoffeeScript files and all the basic generation types to the ember generate command.
Stars: ✭ 72 (-43.75%)
Mutual labels:  ember-cli, ember
Ember Simple Auth Auth0
Auth0 + lock.js, built on ember-simple-auth
Stars: ✭ 53 (-58.59%)
Mutual labels:  ember-cli, ember
Ember Exam
Run your tests with randomization, splitting, and parallelization for beautiful tests.
Stars: ✭ 262 (+104.69%)
Mutual labels:  ember-cli, ember
Ember Cli Eslint
Ember CLI addon for linting Ember projects with ESLint
Stars: ✭ 116 (-9.37%)
Mutual labels:  ember-cli, ember
ember-credit-card
"make your credit card form dreamy in one line of code"
Stars: ✭ 89 (-30.47%)
Mutual labels:  ember-cli, ember
Ember Decorators
Useful decorators for Ember applications.
Stars: ✭ 360 (+181.25%)
Mutual labels:  ember-cli, ember
ember-polaris
An Ember addon for Shopify's Polaris design system
Stars: ✭ 59 (-53.91%)
Mutual labels:  ember-cli, ember
Sharedrop
Easy P2P file transfer powered by WebRTC - inspired by Apple AirDrop
Stars: ✭ 5,222 (+3979.69%)
Mutual labels:  ember-cli, ember
ember-cli-new-version
A convention based update notification for Ember. With this addon, you can detect a new version and notify the user to refresh the page
Stars: ✭ 22 (-82.81%)
Mutual labels:  ember-cli, ember
git-task-list
Git Task Lists
Stars: ✭ 25 (-80.47%)
Mutual labels:  ember-cli, ember
Ember Cli Updater
ember-cli addon to help you update your ember-cli application or addon.
Stars: ✭ 32 (-75%)
Mutual labels:  ember-cli, ember
Ember Cli Stripe
Stripe checkout for Ember
Stars: ✭ 84 (-34.37%)
Mutual labels:  ember-cli, ember

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

Downloads Code Climate Ember Observer Score David 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 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.

Configuration

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: []
    }
  }
};

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 themes in 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

  • 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/.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].