Customizable progress bar for Angular – ngx-progress

by Posted on

An Angular progress bar library that creates a customizable, flexible progress bar with a spinner to visualize http request and/or routing change while prevents user interaction. 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.

Choose the most suitable module for you.

There are four modules:
– NgxProgressModule (intercept both http requests and router changes)
– NgxProgressOnlyHttpModule (intercept only http requests)
– NgxProgressOnlyRouterModule (intercept only router changes)
– NgxProgressOnlyBar (manage progress bar by yourself)



Import one of this in your module.ts

import { NgxProgressModule } from '@kken94/ngx-progress';

@NgModule({
  declarations: [AppComponent],
  imports: [
    ...
    NgxProgressModule,
    ...
  ],
  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

Feature

  • 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

Configuration

Customization

Input Description Default value
color #0984e3
showSpinner false
showBar true
barHeight 1px
spinnerDiameter 10px
initialValue From 1 to 100 undefined
overlay Show overlay that prevent user click true
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.

See live demo and download source code.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

This awesome script developed by z3vin. Visit their official repository for more information and follow for future updates.

Published by admin