Ngx-Progress-Overlay

A simple donut progress bar with a full-screen overlay.

Demo : https://monkeyscript.github.io/ngx-progress-overlay/

Installation

Using npm:

$ npm install ngx-progress-overlay

Usage

Import NgxProgressOverlayModule in the root module (AppModule) :

import{NgxProgressOverlayModule}from'ngx-progress-overlay';
@NgModule({imports: [NgxProgressOverlayModule]})exportclassAppModule{}

Add NgxProgressOverlayService service in your component :

import{NgxProgressOverlayService}from'ngx-progress-overlay';classAppComponentimplementsOnInit{constructor(privateprogressOverlay: NgxProgressOverlayService){}ngOnInit(){// Shows progress barthis.progressOverlay.show('text','#ffd740','white','lightslategray',1);// Set progress valuethis.progressOverlay.setProgress(50);// Hides progress barthis.progressOverlay.hide();}}

Finally, use NgxProgressOverlayComponent in your template

<ngx-progress-overlay></ngx-progress-overlay>

Methods

• show() : Toggles on the overlay. Takes in five inputs,
  • overlay text | string : the text to be shown beneath the value
  • progress bar color | string : the donut color in HEX(optional)
  • progress value color | string : the progress value color in HEX(optional)
  • overlay text color | string : the overlay text color in HEX(optional)
  • donut width | number : the width of donut(optional)
• setProgress() : Sets the progress value. Takes the value(number) as input.
• hide() : Hides the overlay.

Issues & Contributions

For a new feature, create an issue here. Open to all contributions :)

License

Apache-2.0. Please see the license file for more information.