Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @kken94/ngx-progress with all npm packages installed. Try it out:

require("@angular/core/package.json"); // @angular/core is a peer dependency. require("rxjs/package.json"); // rxjs is a peer dependency. require("tslib/package.json"); // tslib is a peer dependency. var ngxProgress = require("@kken94/ngx-progress")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@kken94/ngx-progress v1.5.0

The most powerful and customizable progress bar for Angular ✨

@kken94/ngx-progress

Status npm version Codacy Badge code style: prettier semantic-release license Donate

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 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

<div style="position: relative">
  <ngx-progress [overlay]="true"></ngx-progress>
  <table></table>
</div>

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

InputDescriptionDefault value
color#0984e3
showSpinnerfalse
showBartrue
barHeight1px
spinnerDiameter10px
initialValueFrom 1 to 100undefined
overlayShow overlay that prevent user clicktrue
spinnerSpeedFrom 1 to 104

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 file for details

Donate

Offer me a coffee ☺

donate

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free