Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kken94/ngx-progress
The most powerful and customizable progress bar for Angular ✨
https://github.com/kken94/ngx-progress
angular angular10 angular11 angular12 angular13 angular2 http http-interceptor http-loader ng-loader ngx-loader ngx-loading ngx-loading-bar ngx-progress-bar ngx-spinner spinner
Last synced: about 2 months ago
JSON representation
The most powerful and customizable progress bar for Angular ✨
- Host: GitHub
- URL: https://github.com/kken94/ngx-progress
- Owner: kKen94
- License: mit
- Created: 2019-11-13T13:52:31.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-02-03T05:11:28.000Z (almost 2 years ago)
- Last Synced: 2024-12-08T12:35:44.433Z (about 2 months ago)
- Topics: angular, angular10, angular11, angular12, angular13, angular2, http, http-interceptor, http-loader, ng-loader, ngx-loader, ngx-loading, ngx-loading-bar, ngx-progress-bar, ngx-spinner, spinner
- Language: TypeScript
- Homepage: https://kken94.github.io/ngx-progress
- Size: 13.6 MB
- Stars: 21
- Watchers: 1
- Forks: 3
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# @kken94/ngx-progress
[](https://travis-ci.org/kKen94/ngx-progress)
[](https://www.npmjs.com/package/@kken94/ngx-progress "View this project on npm")
[](https://api.codeclimate.com/v1/badges/53e353f983e519dfa7bc/maintainability)
[](https://www.codacy.com/manual/kKen94/ngx-progress?utm_source=github.com&utm_medium=referral&utm_content=kKen94/ngx-progress&utm_campaign=Badge_Grade)
[](https://github.com/prettier/prettier)
[](https://github.com/semantic-release/semantic-release)
[](http://opensource.org/licenses/MIT)
[](https://paypal.me/nicolataddei)
NgxProgress is customizable Angular library for showing a progress bar during http request and/or routing change (or all you want) and prevent user interaction.
## Changelog
[Please read the changelog](CHANGELOG.md)
## Installation
If you use [npm](https://www.npmjs.com/package/npm)
```bash
npm install @kken94/ngx-progress --save
```
If you use [yarn](https://yarnpkg.com/)
```bash
yarn add @kken94/ngx-progress
```
## Usage
Choose the most suitable module for you.
There are two modules:
- **NgxProgressModule** (manage progress bar by yourself)
- **NgxProgressHttpModule** (import progress bar and intercept http requests)
*****************************************************
**Warning**: to use http module import that in your app.module.ts, then import NgxProgressModule where you want to use progress bar.
*****************************************************
```
import { NgxProgressHttpModule } from '@kken94/ngx-progress';
@NgModule({
declarations: [AppComponent],
imports: [
...
NgxProgressHttpModule,
...
],
bootstrap: [AppComponent],
})
export class AppModule {}
```
and place it into the element you want to cover.
**Note:** If you want to use overlay be sure that the parent element has position:relative
Overlay works with ```position:absolute```, ```top:0```, ```left:0```
```
```
## Features
- NgxProgress supports multiple requests. If during the bar progress another request is fired, bar will not reset and keep going until all requests are completed.
- NgxProgress can be instantiated multiple times. Only the deepest one will be displayed
#### Requests filtering
You can filter the HTTP requests that would like to be avoided by the interceptor by providing an array of regex patterns:
```
import { NgxProgressHttpModule } from '@kken94/ngx-progress';
@NgModule({
declarations: [AppComponent],
imports: [
...
NgxProgressHttpModule.forRoot(['auth', '[a-zA-Z]']),
...
],
bootstrap: [AppComponent],
})
export class AppModule {}
```
## Configuration
### Customization
| Input | Description | Default value |
| ---------------------- | ------------------ | --------------- |
| ```color``` | | ```#0984e3``` |
| ```showSpinner``` | | ```true``` |
| ```showBar``` | | ```true``` |
| ```indeterminate``` | Indeterminate style like Material | ```false``` |
| ```barHeight``` | | ```1px``` |
| ```spinnerDiameter``` | | ```10px``` |
| ```initialValue``` | From 1 to 100 | ```undefined``` |
| ```overlay``` | Show overlay that prevent user click | ```true``` |
| ```overlayValue``` | From 0 to 1 | ```1``` |
| ```spinnerSpeed``` | From 1 to 10 | ```4``` |
### Emitters
NgxProgress provides also some emitters.
You have to inject ```NgxProgressService``` and subscribe ```end$``` or ```start$```
### Manually show and hide progress
In ```NgxProgressService``` there are four methods:
- ```start()```: start bar if no request is in progress or add new request to queue of the bar already shown
- ```end()```: complete the bar if all requests are finished
- ```reset()```: force bar to start from zero
- ```terminate()```: force bar to terminate even if some requests are in progress
### Enable and disable progress bar
In ```NgxProgressService```:
- ```enable()```: enable bars if it has been previously disabled
- ```disable()```: disables all the bars that will not be shown until the next enabling
and provide ```isEnabled``` variable to know if progress bar is enabled.
Enabled by default.
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
## Donate
Offer me a coffee 😁
[](https://paypal.me/nicolataddei)