A complete angular progress bar ✨

Nicola Taddei — Wed, 19 Aug 2020 13:46:41 +0000

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

Please read the 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:

…

View on GitHub

Would you like to help me test it and find bugs? 😁

DEV Community: Nicola Taddei