https://github.com/tigressbailey/ember-cli-page-progress
A handy transition indicator wrote without the jQuery dependency.
https://github.com/tigressbailey/ember-cli-page-progress
ember ember-addon indicator javascript progress-bar progressbar
Last synced: 4 months ago
JSON representation
A handy transition indicator wrote without the jQuery dependency.
- Host: GitHub
- URL: https://github.com/tigressbailey/ember-cli-page-progress
- Owner: tigressbailey
- License: mit
- Created: 2018-10-31T15:42:34.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-12T02:28:29.000Z (over 3 years ago)
- Last Synced: 2025-08-09T05:28:44.325Z (10 months ago)
- Topics: ember, ember-addon, indicator, javascript, progress-bar, progressbar
- Language: JavaScript
- Homepage: https://tigressbailey.github.io/ember-cli-page-progress
- Size: 2.54 MB
- Stars: 12
- Watchers: 1
- Forks: 7
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
ember-cli-page-progress
==============================================================================
[](https://badge.fury.io/js/ember-cli-page-progress) [](https://opensource.org/licenses/MIT)
[](https://travis-ci.com/tigressbailey/ember-cli-page-progress)
[](https://emberobserver.com/addons/ember-cli-page-progress)
A handy transition indicator wrote without the jQuery dependency.
[Demo site](https://tigressbailey.github.io/ember-cli-page-progress/)
## 🎉 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:
1. Add the component to `application.hbs`
```hbs
```
2. 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.
```js
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:
1. Add the component to `application.hbs`
```hbs
{{page-progress}}
```
2. Import progress mixin and extend it in the application route - `application.js`
```js
import ProgressMixin from './../mixins/progress';
export default Ember.Route.extend(ProgressMixin, {...});
```
------------------------------------------------------------------------------
## Configuration
------------------------------------------------------------------------------
1. 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
```hbs
```
v1.3.3
```hbs
{{page-progress speed=300}}
```
2. 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
```hbs
```
v1.3.3
```hbs
{{page-progress minimum=0.1}}
```
3. 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
```hbs
```
or
```hbs
```
v1.3.3
```hbs
{{page-progress background="green"}}
```
or
```hbs
{{page-progress background="#29d"}}
```
4. Global Configuration:
If would like to exclude the included css file, include the folling to your `ember-cli-build.js` file:
```js
let app = new EmberApp(defaults, {
'ember-cli-page-progress': {
includeCss: false
}
}
});
```
Provide your own CSS instead:
```css
.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](http://localhost:4200).
For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).
## Contributors
------------------------------------------------------------------------------
- :tiger: [Bailey Zhang](https://tigressbailey.github.io)
- [Donald Wasserman](
)
## License
------------------------------------------------------------------------------
This project is licensed under the [MIT License](LICENSE.md).