fuse-progress-bar is a custom built Fuse component allows you to have a service controlled progress bar. It internally uses mat-progress-bar and provides a global service to control it.

Due to the nature of global progress bars, fuse-progress-bar can only be used once in the entire app and it's currently located at app.component.html file.

<fuse-progress-bar></fuse-progress-bar>

export class SomeComponent implements OnInit { /** * Constructor */ constructor( private _fuseProgressBarService: FuseProgressBarService ) {} showcase() { // Show the progress bar this._fuseProgressBarService.show(); // Hide the progress bar this._fuseProgressBarService.hide(); // Set the mode // mode: 'determinate' | 'indeterminate' | 'buffer' | 'query' this._fuseProgressBarService.setMode(mode); // Set the value // value: number this._fuseProgressBarService.setValue(value); // Set the buffer value // bufferValue: number this._fuseProgressBarService.setBufferValue(bufferValue); } }