ember-cli-page-progress

ember-cli-page-progress

A handy transition indicator wrote without the jQuery dependency.

Demo site

🎉 This addon supports Ember 3 now.

• Please read the upgrade guide if you try to use the v2.0.0 version on Ember 3.
• Please install v1.3.3 and read the v1.3.3 guide on Ember 2.

🏁 ==== Guide for v2.0.0 ====

Prerequisites

• Ember.js v3.12 or above
• Ember CLI v2.13 or above
• Node.js v10 or above

Installation

ember install ember-cli-page-progress

Usage

2 steps can make this addon work:

• Add the component to application.hbs

  <PageProgress />
  

• Import page progress service and add the loading in the application route - application.js Comparing to v1.3.3, the Mixin is not formally recommended.

  import { inject as service } from '@ember/service';
  import Route from '@ember/routing/route';
  import { action, get } from '@ember/object';
  
  export default class Application extends Route {
    @service pageProgress;
    @action
    async loading(transition) {
      const pageProgress = get(this, 'pageProgress');
      pageProgress.start(transition.targetName);
      transition.promise.finally(() => {
        pageProgress.done();
      });
      return true;
    }
  }
  

🏁 ==== Guide for v1.3.3 ====

Installation

ember install ember-cli-page-progress@~1.3.3

Usage

2 steps can make this addon work:

• Add the component to application.hbs

  {{page-progress}}
  

• Import progress mixin and extend it in the application route - application.js

  import ProgressMixin from './../mixins/progress';
  
  export default Ember.Route.extend(ProgressMixin, {...});
  

Configuration

• Speed:

  It represents the increasing speed of the progress bar.

  Default value is 200 if you don't provide it.

  Please provide value as milliseconds.

  For example:

  v2.0.0

  <PageProgress @speed={{300}} />
  

  v1.3.3

  {{page-progress speed=300}}
  

• Minimum:

  It represents the bar width at the start point.

  Default value is 0.08 if you don't provide it.

  Please provide value as float.

  For example:

  v2.0.0

  <PageProgress @minimum={{0.1}} />
  

  v1.3.3

  {{page-progress minimum=0.1}}
  

• Background:

  It represents the bar background color.

  Default value is red if you don't provide it.

  Please provide value as string.

  For example: v2.0.0

  <PageProgress @background={{"green"}} />
  

  or

  <PageProgress @background={{"#29d"}} />
  

  v1.3.3

  {{page-progress background="green"}}
  

  or

  {{page-progress background="#29d"}}
  

• Global Configuration:

  If would like to exclude the included css file, include the folling to your ember-cli-build.js file:

  let app = new EmberApp(defaults, {
      'ember-cli-page-progress': {
        includeCss: false
      }
    }
  });
  

  Provide your own CSS instead:

  .page-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1031;
    pointer-events: none;
  }
  
  .page-progress .bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    box-shadow: 0 0 10px rgba(0, 13, 41, 0.8);
    transition: none;
  }
  

Contributing

Installation

• git clone https://github.com/tigressbailey/ember-cli-page-progress.git
• cd ember-cli-page-progress
• yarn install

Linting

• yarn lint:hbs
• yarn lint:js
• yarn lint:js -- --fix

Running tests

• ember test – Runs the test suite on the current Ember version
• ember test --server – Runs the test suite in "watch mode"
• ember try:each – Runs the test suite against multiple Ember versions

Running the dummy application

• ember serve
• Visit the dummy application at http://localhost:4200.

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

Contributors

• :tiger: Bailey Zhang

• Donald Wasserman

License

This project is licensed under the MIT License.