Hi guys,
I think I created a great customizable progress-bar for angular2+.
๐งจ Features ๐งจ
Classic features ๐ :
โข Possibility to choose a bar, a spinner or both of them
โข Custom color
โข Custom height and diameter
โข Indeterminate bar like Material
โข Spinner speed
Other features ๐:
โข Possibility to show an overlay
โข Custom overlay value
โข Http interceptor and urls filtering
โข It supports multiple requests. If during the bar progress another request is fired, bar will not reset and keep going until all requests are completed.
Killer feature ๐:
It can be instantiated multiple times. Only the deepest one will be displayed
Check it out ๐๐ป
kKen94
/
ngx-progress
The most powerful and customizable progress bar for Angular โจ
@kken94/ngx-progress
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
Installation
If you use npm
npm install @kken94/ngx-progress --save
If you use yarn
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
<div style="position:Would you like to help me test it and find bugs? ๐
Top comments (0)