ember-cli-page-progress
A handy transition indicator wrote without the jQuery dependency.
🎉 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 = defaults'ember-cli-page-progress':includeCss: false};Provide your own CSS instead:
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 versionember 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
License
This project is licensed under the MIT License.