fuse-loading-bar is a small component to show the loading status at the top of the page. It can be configured to the Auto Mode to show/hide automatically on each HTTP request. It can also be toggled manually using its service.

Exported as: fuseLoadingBar

Module

Usage

Here's the basic usage of the fuse-loading-bar. We already placed the component to the layout templates for you but you can always move it!

Properties

Name	Description	Default
@Input() autoMode: boolean	Turn on or off the Auto Mode.	`true`

Service

FuseLoadingService can be injected to control the loading bar from anywhere.

show(): void;

Shows the loading bar

hide(): void;

Hides the loading bar

setAutoMode(value: boolean): void;

Sets the Auto Mode. In Auto mode, loading bar will show when there is an HTTP request and it will hide when all HTTP requests are completed or failed.

setMode(value: 'determinate' | 'indeterminate'): void;

Sets the mode of the underlying MatProgressBar component.

setProgress(value: number): void;

Sets the progress manually. Only available on determinate mode.

Examples

Show / hide the loading bar manually

Toggle the Auto Mode

Auto Mode

API call status: {{apiCallStatus}}

apiCallStatus: string = '-';

/**
                         * Constructor
                         */
                        constructor(
                            private _httpClient: HttpClient,
                            private _fuseLoadingService: FuseLoadingService
                        )
                        { }

...

/**
                         * Set the auto mode
                         *
                         * @param change
                         */
                        setAutoMode(change: MatSlideToggleChange): void
                        {
                            this._fuseLoadingService.setAutoMode(change.checked);
                        }

/**
                         * Make a fake API call
                         */
                        makeAPICall(): void
                        {
                            this.apiCallStatus = 'Waiting...';

this._httpClient.get('https://jsonplaceholder.typicode.com/posts?_delay=2000')
                                .pipe(finalize(() => { this.apiCallStatus = 'Finished!'; }))
                                .subscribe((response) => {
                                    console.log(response);
                                });
                        }

Manually set the progress

Toggle determinate mode

Progress value

mode: 'determinate' | 'indeterminate' = 'indeterminate';

/**
                         * Constructor
                         */
                        constructor( private _fuseLoadingService: FuseLoadingService ) { }

...

/**
                         * Toggle the mode
                         */
                        toggleMode(): void
                        {
                            // Show the loading bar
                            this._fuseLoadingService.show();

// Turn off the auto mode
                            this._fuseLoadingService.setAutoMode(false);

// Set the mode
                            this.mode = this.mode === 'indeterminate' ? 'determinate' : 'indeterminate';
                            this._fuseLoadingService.setMode(this.mode);
                        }

/**
                         * Set the progress
                         *
                         * @param change
                         */
                        setProgress(change: MatSliderChange): void
                        {
                            this._fuseLoadingService.setProgress(change.value);
                        }

Loading Bar