ngx-progress-overlay

A donut progress bar with full screen overlay.

Usage no npm install needed!

<script type="module">
  import ngxProgressOverlay from 'https://cdn.skypack.dev/ngx-progress-overlay';
</script>

README

Ngx-Progress-Overlay

npm npm bundle size NPM

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
  ]
})

export class AppModule { }

Add NgxProgressOverlayService service in your component :

import { NgxProgressOverlayService } from 'ngx-progress-overlay';

class AppComponent implements OnInit {
  
  constructor(private progressOverlay: NgxProgressOverlayService) { }

  ngOnInit() {

    // Shows progress bar
    this.progressOverlay.show('text','#ffd740','white','lightslategray',1);

    // Set progress value
    this.progressOverlay.setProgress(50);

    // Hides progress bar
    this.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.