Documentation
Fuse Components
Components

## Loading Bar

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

import { FuseLoadingBarModule } from '@fuse/components/loading-bar';

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

<fuse-loading-bar></fuse-loading-bar>

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

<button mat-flat-button [color]="'primary'" (click)="showLoadingBar()"> Show loading bar </button> <button mat-flat-button [color]="'primary'" (click)="hideLoadingBar()"> Hide loading bar </button> private _fuseLoadingService = inject(FuseLoadingService); ... /** * Show the loading bar */ showLoadingBar(): void { this._fuseLoadingService.show(); } /** * Hide the loading bar */ hideLoadingBar(): void { this._fuseLoadingService.hide(); }

###### Toggle the Auto Mode

Auto Mode
API call status: {{ apiCallStatus }}
<mat-slide-toggle [checked]="true" [color]="'primary'" (change)="setAutoMode($event)"> Auto Mode </mat-slide-toggle> <div class="w-24 pt-6 mb-6 border-b"></div> <button mat-flat-button [color]="'primary'" (click)="makeAPICall()"> Make an API call (2000ms delay) </button> <div class="mt-2">API call status: {{ apiCallStatus }}</div> private _httpClient = inject(HttpClient); private _fuseLoadingService = inject(FuseLoadingService); apiCallStatus: string = '-'; ... /** * 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
<mat-slide-toggle [checked]="false" [color]="'primary'" (change)="toggleMode()"> Toggle determinate mode </mat-slide-toggle> <mat-slider [color]="'primary'" (change)="setProgress($event)"> Progress value </mat-slider> private _fuseLoadingService = inject(FuseLoadingService); mode: 'determinate' | 'indeterminate' = 'indeterminate'; ... /** * 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); }