(@fuse/loading-bar) First iteration of the FuseLoadingBar component, service, interceptor and their documentation

src/@fuse/components/loading-bar/index.ts

@@ -0,0 +1 @@
+export * from '@fuse/components/loading-bar/public-api';

src/@fuse/components/loading-bar/loading-bar.component.html

@@ -0,0 +1,5 @@
+<ng-container *ngIf="show">
+    <mat-progress-bar
+        [mode]="mode"
+        [value]="progress"></mat-progress-bar>
+</ng-container>

src/@fuse/components/loading-bar/loading-bar.component.scss

@@ -0,0 +1,7 @@
+fuse-loading-bar {
+    position: fixed;
+    top: 0;
+    z-index: 999;
+    width: 100%;
+    height: 6px;
+}

src/@fuse/components/loading-bar/loading-bar.component.ts

@@ -0,0 +1,83 @@
+import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { FuseLoadingBarService } from '@fuse/components/loading-bar/loading-bar.service';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+
+@Component({
+    selector     : 'fuse-loading-bar',
+    templateUrl  : './loading-bar.component.html',
+    styleUrls    : ['./loading-bar.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    exportAs     : 'fuseLoadingBar'
+})
+export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy
+{
+    @Input() autoMode: boolean = true;
+    mode: 'determinate' | 'indeterminate';
+    progress: number = 0;
+    show: boolean = false;
+    private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+    /**
+     * Constructor
+     */
+    constructor(private _fuseLoadingBarService: FuseLoadingBarService)
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On changes
+     *
+     * @param changes
+     */
+    ngOnChanges(changes: SimpleChanges): void
+    {
+        // Auto mode
+        if ( 'autoMode' in changes )
+        {
+            // Set the auto mode in the service
+            this._fuseLoadingBarService.setAutoMode(coerceBooleanProperty(changes.autoMode.currentValue));
+        }
+    }
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Subscribe to the service
+        this._fuseLoadingBarService.mode$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((value) => {
+                this.mode = value;
+            });
+
+        this._fuseLoadingBarService.progress$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((value) => {
+                this.progress = value;
+            });
+
+        this._fuseLoadingBarService.show$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((value) => {
+                this.show = value;
+            });
+
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+}

src/@fuse/components/loading-bar/loading-bar.interceptor.ts

@@ -0,0 +1,49 @@
+import { Injectable } from '@angular/core';
+import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { finalize } from 'rxjs/operators';
+import { FuseLoadingBarService } from '@fuse/components/loading-bar/loading-bar.service';
+
+@Injectable()
+export class FuseLoadingBarInterceptor implements HttpInterceptor
+{
+    handleRequestsAutomatically: boolean;
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _fuseLoadingBarService: FuseLoadingBarService
+    )
+    {
+        // Subscribe to the auto
+        this._fuseLoadingBarService.auto$
+            .subscribe((value) => {
+                this.handleRequestsAutomatically = value;
+            });
+    }
+
+    /**
+     * Intercept
+     *
+     * @param req
+     * @param next
+     */
+    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>
+    {
+        // If the Auto mode is turned off, do nothing
+        if ( !this.handleRequestsAutomatically )
+        {
+            return next.handle(req);
+        }
+
+        // Set the loading status to true
+        this._fuseLoadingBarService._setLoadingStatus(true, req.url);
+
+        return next.handle(req).pipe(
+            finalize(() => {
+                // Set the status to false if there are any errors or the request is completed
+                this._fuseLoadingBarService._setLoadingStatus(false, req.url);
+            }));
+    }
+}

src/@fuse/components/loading-bar/loading-bar.module.ts

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { FuseLoadingBarComponent } from '@fuse/components/loading-bar/loading-bar.component';
+import { FuseLoadingBarInterceptor } from '@fuse/components/loading-bar/loading-bar.interceptor';
+
+@NgModule({
+    declarations: [
+        FuseLoadingBarComponent
+    ],
+    imports     : [
+        CommonModule,
+        MatProgressBarModule
+    ],
+    exports     : [
+        FuseLoadingBarComponent
+    ],
+    providers   : [
+        {
+            provide : HTTP_INTERCEPTORS,
+            useClass: FuseLoadingBarInterceptor,
+            multi   : true
+        }
+    ]
+})
+export class FuseLoadingBarModule
+{
+}

src/@fuse/components/loading-bar/loading-bar.service.ts

@@ -0,0 +1,146 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class FuseLoadingBarService
+{
+    private _auto$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
+    private _mode$: BehaviorSubject<'determinate' | 'indeterminate'> = new BehaviorSubject<'determinate' | 'indeterminate'>('indeterminate');
+    private _progress$: BehaviorSubject<number | null> = new BehaviorSubject<number | null>(0);
+    private _show$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+    private _urlMap: Map<string, boolean> = new Map<string, boolean>();
+
+    /**
+     * Constructor
+     */
+    constructor(private _httpClient: HttpClient)
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Getter for auto mode
+     */
+    get auto$(): Observable<boolean>
+    {
+        return this._auto$.asObservable();
+    }
+
+    /**
+     * Getter for mode
+     */
+    get mode$(): Observable<'determinate' | 'indeterminate'>
+    {
+        return this._mode$.asObservable();
+    }
+
+    /**
+     * Getter for progress
+     */
+    get progress$(): Observable<number>
+    {
+        return this._progress$.asObservable();
+    }
+
+    /**
+     * Getter for show
+     */
+    get show$(): Observable<boolean>
+    {
+        return this._show$.asObservable();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Show the loading bar
+     */
+    show(): void
+    {
+        this._show$.next(true);
+    }
+
+    /**
+     * Hide the loading bar
+     */
+    hide(): void
+    {
+        this._show$.next(false);
+    }
+
+    /**
+     * Set the auto mode
+     *
+     * @param value
+     */
+    setAutoMode(value: boolean): void
+    {
+        this._auto$.next(value);
+    }
+
+    /**
+     * Set the mode
+     *
+     * @param value
+     */
+    setMode(value: 'determinate' | 'indeterminate'): void
+    {
+        this._mode$.next(value);
+    }
+
+    /**
+     * Set the progress of the bar manually
+     *
+     * @param value
+     */
+    setProgress(value: number): void
+    {
+        if ( value < 0 || value > 100 )
+        {
+            console.error('Progress value must be between 0 and 100!');
+            return;
+        }
+
+        this._progress$.next(value);
+    }
+
+    /**
+     * Sets the loading status on the given url
+     *
+     * @param status
+     * @param url
+     */
+    _setLoadingStatus(status: boolean, url: string): void
+    {
+        // Return if the url was not provided
+        if ( !url )
+        {
+            console.error('The request URL must be provided!');
+            return;
+        }
+
+        if ( status === true )
+        {
+            this._urlMap.set(url, status);
+            this._show$.next(true);
+        }
+        else if ( status === false && this._urlMap.has(url) )
+        {
+            this._urlMap.delete(url);
+        }
+
+        // Only set the status to 'false' if all outgoing requests are completed
+        if ( this._urlMap.size === 0 )
+        {
+            this._show$.next(false);
+        }
+    }
+}

src/@fuse/components/loading-bar/public-api.ts

@@ -0,0 +1,3 @@
+export * from '@fuse/components/loading-bar/loading-bar.component';
+export * from '@fuse/components/loading-bar/loading-bar.service';
+export * from '@fuse/components/loading-bar/loading-bar.module';

src/app/layout/layout.module.ts

@@ -1,7 +1,4 @@
 import { NgModule } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { FuseDrawerModule } from '@fuse/components/drawer';
 import { LayoutComponent } from 'app/layout/layout.component';
 import { EmptyLayoutModule } from 'app/layout/layouts/empty/empty.module';
 import { CenteredLayoutModule } from 'app/layout/layouts/horizontal/centered/centered.module';
@@ -40,13 +37,10 @@ const layoutModules = [
     declarations: [
         LayoutComponent
     ],
-    imports: [
-        MatIconModule,
-        MatTooltipModule,
-        FuseDrawerModule,
+    imports     : [
         SharedModule,
         SettingsModule,
-        ...layoutModules,
+        ...layoutModules
     ],
     exports     : [
         LayoutComponent,

src/app/layout/layouts/empty/empty.component.html

@@ -1,3 +1,6 @@
+<!-- Loading bar -->
+<fuse-loading-bar></fuse-loading-bar>
+
 <!-- Wrapper -->
 <div class="flex flex-col flex-auto w-full">
 

src/app/layout/layouts/empty/empty.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { FuseLoadingBarModule } from '@fuse/components/loading-bar';
 import { SharedModule } from 'app/shared/shared.module';
 import { EmptyLayoutComponent } from 'app/layout/layouts/empty/empty.component';
 
@@ -9,6 +10,7 @@ import { EmptyLayoutComponent } from 'app/layout/layouts/empty/empty.component';
     ],
     imports     : [
         RouterModule,
+        FuseLoadingBarModule,
         SharedModule
     ],
     exports     : [

src/app/layout/layouts/horizontal/centered/centered.component.html

@@ -1,3 +1,6 @@
+<!-- Loading bar -->
+<fuse-loading-bar></fuse-loading-bar>
+
 <div class="flex flex-auto justify-center w-full sm:p-4 md:p-8 bg-gray-200 dark:bg-card">
 
     <!-- Navigation -->

src/app/layout/layouts/horizontal/centered/centered.module.ts

@@ -6,6 +6,7 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
+import { FuseLoadingBarModule } from '@fuse/components/loading-bar';
 import { FuseNavigationModule } from '@fuse/components/navigation';
 import { LanguagesModule } from 'app/layout/common/languages/languages.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
@@ -28,6 +29,7 @@ import { CenteredLayoutComponent } from 'app/layout/layouts/horizontal/centered/
         MatIconModule,
         MatMenuModule,
         FuseFullscreenModule,
+        FuseLoadingBarModule,
         FuseNavigationModule,
         LanguagesModule,
         MessagesModule,

src/app/layout/layouts/horizontal/enterprise/enterprise.component.html

@@ -1,3 +1,6 @@
+<!-- Loading bar -->
+<fuse-loading-bar></fuse-loading-bar>
+
 <!-- Navigation -->
 <ng-container *ngIf="isScreenSmall">
     <fuse-vertical-navigation

src/app/layout/layouts/horizontal/enterprise/enterprise.module.ts

@@ -6,6 +6,7 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
+import { FuseLoadingBarModule } from '@fuse/components/loading-bar';
 import { FuseNavigationModule } from '@fuse/components/navigation';
 import { LanguagesModule } from 'app/layout/common/languages/languages.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
@@ -29,6 +30,7 @@ import { EnterpriseLayoutComponent } from 'app/layout/layouts/horizontal/enterpr
         MatIconModule,
         MatMenuModule,
         FuseFullscreenModule,
+        FuseLoadingBarModule,
         FuseNavigationModule,
         LanguagesModule,
         MessagesModule,

src/app/layout/layouts/horizontal/material/material.component.html

@@ -1,3 +1,6 @@
+<!-- Loading bar -->
+<fuse-loading-bar></fuse-loading-bar>
+
 <!-- Navigation -->
 <ng-container *ngIf="isScreenSmall">
     <fuse-vertical-navigation

src/app/layout/layouts/horizontal/material/material.module.ts

@@ -6,6 +6,7 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
+import { FuseLoadingBarModule } from '@fuse/components/loading-bar';
 import { FuseNavigationModule } from '@fuse/components/navigation';
 import { LanguagesModule } from 'app/layout/common/languages/languages.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
@@ -28,6 +29,7 @@ import { MaterialLayoutComponent } from 'app/layout/layouts/horizontal/material/
         MatIconModule,
         MatMenuModule,
         FuseFullscreenModule,
+        FuseLoadingBarModule,
         FuseNavigationModule,
         LanguagesModule,
         MessagesModule,

src/app/layout/layouts/horizontal/modern/modern.component.html

@@ -1,3 +1,6 @@
+<!-- Loading bar -->
+<fuse-loading-bar></fuse-loading-bar>
+
 <!-- Navigation -->
 <ng-container *ngIf="isScreenSmall">
     <fuse-vertical-navigation

src/app/layout/layouts/horizontal/modern/modern.module.ts

@@ -6,6 +6,7 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
+import { FuseLoadingBarModule } from '@fuse/components/loading-bar';
 import { FuseNavigationModule } from '@fuse/components/navigation';
 import { LanguagesModule } from 'app/layout/common/languages/languages.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
@@ -29,6 +30,7 @@ import { ModernLayoutComponent } from 'app/layout/layouts/horizontal/modern/mode
         MatIconModule,
         MatMenuModule,
         FuseFullscreenModule,
+        FuseLoadingBarModule,
         FuseNavigationModule,
         LanguagesModule,
         MessagesModule,

src/app/layout/layouts/vertical/classic/classic.component.html

@@ -1,3 +1,6 @@
+<!-- Loading bar -->
+<fuse-loading-bar></fuse-loading-bar>
+
 <!-- Navigation -->
 <fuse-vertical-navigation
     class="dark bg-gray-900 print:hidden"

src/app/layout/layouts/vertical/classic/classic.module.ts

@@ -6,6 +6,7 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
+import { FuseLoadingBarModule } from '@fuse/components/loading-bar';
 import { FuseNavigationModule } from '@fuse/components/navigation';
 import { LanguagesModule } from 'app/layout/common/languages/languages.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
@@ -29,6 +30,7 @@ import { ClassicLayoutComponent } from 'app/layout/layouts/vertical/classic/clas
         MatIconModule,
         MatMenuModule,
         FuseFullscreenModule,
+        FuseLoadingBarModule,
         FuseNavigationModule,
         LanguagesModule,
         MessagesModule,

src/app/layout/layouts/vertical/classy/classy.component.html

@@ -1,3 +1,6 @@
+<!-- Loading bar -->
+<fuse-loading-bar></fuse-loading-bar>
+
 <!-- Navigation -->
 <fuse-vertical-navigation
     class="dark bg-gray-900 print:hidden"

src/app/layout/layouts/vertical/classy/classy.module.ts

@@ -6,6 +6,7 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseNavigationModule } from '@fuse/components/navigation';
+import { FuseLoadingBarModule } from '@fuse/components/loading-bar';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen/fullscreen.module';
 import { LanguagesModule } from 'app/layout/common/languages/languages.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
@@ -29,6 +30,7 @@ import { ClassyLayoutComponent } from 'app/layout/layouts/vertical/classy/classy
         MatIconModule,
         MatMenuModule,
         FuseFullscreenModule,
+        FuseLoadingBarModule,
         FuseNavigationModule,
         LanguagesModule,
         MessagesModule,

src/app/layout/layouts/vertical/compact/compact.component.html

@@ -1,3 +1,6 @@
+<!-- Loading bar -->
+<fuse-loading-bar></fuse-loading-bar>
+
 <!-- Navigation -->
 <fuse-vertical-navigation
     class="dark bg-gray-900 print:hidden"

src/app/layout/layouts/vertical/compact/compact.module.ts

@@ -6,6 +6,7 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
+import { FuseLoadingBarModule } from '@fuse/components/loading-bar';
 import { FuseNavigationModule } from '@fuse/components/navigation';
 import { LanguagesModule } from 'app/layout/common/languages/languages.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
@@ -29,6 +30,7 @@ import { CompactLayoutComponent } from 'app/layout/layouts/vertical/compact/comp
         MatIconModule,
         MatMenuModule,
         FuseFullscreenModule,
+        FuseLoadingBarModule,
         FuseNavigationModule,
         LanguagesModule,
         MessagesModule,

src/app/layout/layouts/vertical/dense/dense.component.html

@@ -1,3 +1,6 @@
+<!-- Loading bar -->
+<fuse-loading-bar></fuse-loading-bar>
+
 <!-- Navigation -->
 <fuse-vertical-navigation
     class="dark bg-gray-900 print:hidden"

src/app/layout/layouts/vertical/dense/dense.module.ts

@@ -6,6 +6,7 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
+import { FuseLoadingBarModule } from '@fuse/components/loading-bar';
 import { FuseNavigationModule } from '@fuse/components/navigation';
 import { LanguagesModule } from 'app/layout/common/languages/languages.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
@@ -29,6 +30,7 @@ import { DenseLayoutComponent } from 'app/layout/layouts/vertical/dense/dense.co
         MatIconModule,
         MatMenuModule,
         FuseFullscreenModule,
+        FuseLoadingBarModule,
         FuseNavigationModule,
         LanguagesModule,
         MessagesModule,

src/app/layout/layouts/vertical/futuristic/futuristic.component.html

@@ -1,3 +1,6 @@
+<!-- Loading bar -->
+<fuse-loading-bar></fuse-loading-bar>
+
 <!-- Navigation -->
 <fuse-vertical-navigation
     class="dark bg-indigo-800 text-white print:hidden"

src/app/layout/layouts/vertical/futuristic/futuristic.module.ts

@@ -6,6 +6,7 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
+import { FuseLoadingBarModule } from '@fuse/components/loading-bar';
 import { FuseNavigationModule } from '@fuse/components/navigation';
 import { LanguagesModule } from 'app/layout/common/languages/languages.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
@@ -29,6 +30,7 @@ import { FuturisticLayoutComponent } from 'app/layout/layouts/vertical/futuristi
         MatIconModule,
         MatMenuModule,
         FuseFullscreenModule,
+        FuseLoadingBarModule,
         FuseNavigationModule,
         LanguagesModule,
         MessagesModule,

src/app/layout/layouts/vertical/thin/thin.component.html

@@ -1,3 +1,6 @@
+<!-- Loading bar -->
+<fuse-loading-bar></fuse-loading-bar>
+
 <!-- Navigation -->
 <fuse-vertical-navigation
     class="bg-card dark:bg-gray-900 print:hidden"

src/app/layout/layouts/vertical/thin/thin.module.ts

@@ -6,6 +6,7 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
+import { FuseLoadingBarModule } from '@fuse/components/loading-bar';
 import { FuseNavigationModule } from '@fuse/components/navigation';
 import { LanguagesModule } from 'app/layout/common/languages/languages.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
@@ -29,6 +30,7 @@ import { ThinLayoutComponent } from 'app/layout/layouts/vertical/thin/thin.compo
         MatIconModule,
         MatMenuModule,
         FuseFullscreenModule,
+        FuseLoadingBarModule,
         FuseNavigationModule,
         LanguagesModule,
         MessagesModule,

src/app/modules/admin/ui/fuse-components/components/loading-bar/loading-bar.component.html

@@ -0,0 +1,484 @@
+<div class="flex flex-col flex-auto min-w-0">
+
+    <!-- Header -->
+    <div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
+        <div class="flex-1 min-w-0">
+            <!-- Breadcrumbs -->
+            <div class="flex flex-wrap items-center font-medium">
+                <div>
+                    <a class="whitespace-nowrap text-primary-500">Documentation</a>
+                </div>
+                <div class="flex items-center ml-1 whitespace-nowrap">
+                    <mat-icon
+                        class="icon-size-5 text-secondary"
+                        [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
+                    <a class="ml-1 text-primary-500">Fuse Components</a>
+                </div>
+                <div class="flex items-center ml-1 whitespace-nowrap">
+                    <mat-icon
+                        class="icon-size-5 text-secondary"
+                        [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
+                    <span class="ml-1 text-secondary">Components</span>
+                </div>
+            </div>
+            <!-- Title -->
+            <div class="mt-2">
+                <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
+                    Loading Bar
+                </h2>
+            </div>
+        </div>
+        <button
+            class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
+            mat-icon-button
+            (click)="toggleDrawer()">
+            <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
+        </button>
+    </div>
+
+    <div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
+
+        <p>
+            <strong>fuse-loading-bar</strong> is a small component to show the loading status at the top of the page. It can be configured to the
+            <strong>Auto Mode</strong> to show/hide automatically on each HTTP request. It can also be toggled manually using its service.
+        </p>
+        <p>
+            <strong>Exported as: </strong><code>fuseLoadingBar</code>
+        </p>
+
+        <h2>Module</h2>
+        <textarea
+            fuse-highlight
+            lang="typescript">
+            import { FuseLoadingBarModule } from '@fuse/components/loading-bar';
+        </textarea>
+
+        <h2>Usage</h2>
+        <p>
+            Here's the basic usage of the <code>fuse-loading-bar</code>. We already placed the component to the
+            layout templates for you but you can always move it!
+        </p>
+        <!-- @formatter:off -->
+        <textarea fuse-highlight
+                  lang="html">
+            &lt;fuse-loading-bar&gt;&lt;/fuse-loading-bar&gt;
+        </textarea>
+        <!-- @formatter:on -->
+
+        <h2>Properties</h2>
+        <div class="bg-card py-3 px-6 rounded shadow">
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Description</th>
+                        <th>Default</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td class="font-mono text-md text-secondary">
+                            <div>@Input()</div>
+                            <div>autoMode: boolean</div>
+                        </td>
+                        <td>
+                            Turn on or off the Auto Mode.
+                        </td>
+                        <td>
+                            <code>true</code>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h2>Service</h2>
+        <p>
+            <code>FuseLoadingBarService</code> can be injected to control the loading bar from anywhere.
+        </p>
+        <div class="bg-card rounded shadow mt-4">
+            <div class="px-6 py-3 font-mono text-secondary border-b">
+                show(): void;
+            </div>
+            <div class="p-6">
+                Shows the loading bar
+            </div>
+        </div>
+        <div class="bg-card rounded shadow mt-4">
+            <div class="px-6 py-3 font-mono text-secondary border-b">
+                hide(): void;
+            </div>
+            <div class="p-6">
+                Hides the loading bar
+            </div>
+        </div>
+        <div class="bg-card rounded shadow mt-4">
+            <div class="px-6 py-3 font-mono text-secondary border-b">
+                setAutoMode(value: boolean): void;
+            </div>
+            <div class="p-6">
+                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.
+            </div>
+        </div>
+        <div class="bg-card rounded shadow mt-4">
+            <div class="px-6 py-3 font-mono text-secondary border-b">
+                setMode(value: 'determinate' | 'indeterminate'): void;
+            </div>
+            <div class="p-6">
+                Sets the mode of the underlying <code>MatProgressBar</code> component.
+            </div>
+        </div>
+        <div class="bg-card rounded shadow mt-4">
+            <div class="px-6 py-3 font-mono text-secondary border-b">
+                setProgress(value: number): void;
+            </div>
+            <div class="p-6">
+                Sets the progress manually. Only available on <code>determinate</code> mode.
+            </div>
+        </div>
+
+        <h2>Examples</h2>
+        <div class="example-viewer">
+
+            <div class="title">
+                <h6>Show / hide the loading bar manually</h6>
+            </div>
+
+            <mat-tab-group [animationDuration]="'0ms'">
+
+                <mat-tab label="Preview">
+
+                    <ng-template matTabContent>
+
+                        <div class="bg-gray-100 p-4">
+                            <div class="flex mx-auto max-w-80 space-x-4">
+
+                                <button
+                                    mat-flat-button
+                                    [color]="'primary'"
+                                    (click)="showLoadingBar()">
+                                    Show loading bar
+                                </button>
+
+                                <button
+                                    mat-flat-button
+                                    [color]="'primary'"
+                                    (click)="hideLoadingBar()">
+                                    Hide loading bar
+                                </button>
+
+                            </div>
+                        </div>
+
+                    </ng-template>
+
+                </mat-tab>
+
+                <mat-tab label="HTML">
+
+                    <!-- @formatter:off -->
+                    <textarea
+                        fuse-highlight
+                        [lang]="'html'">
+                        <button
+                            mat-flat-button
+                            [color]="'primary'"
+                            (click)="showLoadingBar()">
+                            Show loading bar
+                        </button>
+
+                        <button
+                            mat-flat-button
+                            [color]="'primary'"
+                            (click)="hideLoadingBar()">
+                            Hide loading bar
+                        </button>
+                    </textarea>
+                    <!-- @formatter:on -->
+
+                </mat-tab>
+
+                <mat-tab label="Typescript">
+
+                    <!-- @formatter:off -->
+                    <textarea
+                        fuse-highlight
+                        [lang]="'ts'">
+                        /**
+                         * Constructor
+                         */
+                        constructor( private _fuseLoadingBarService: FuseLoadingBarService ) { }
+
+                        ...
+
+                        /**
+                         * Show the loading bar
+                         */
+                        showLoadingBar(): void
+                        {
+                            this._fuseLoadingBarService.show();
+                        }
+
+                        /**
+                         * Hide the loading bar
+                         */
+                        hideLoadingBar(): void
+                        {
+                            this._fuseLoadingBarService.hide();
+                        }
+                    </textarea>
+                    <!-- @formatter:on -->
+
+                </mat-tab>
+
+            </mat-tab-group>
+
+        </div>
+
+        <div class="example-viewer">
+
+            <div class="title">
+                <h6>Toggle the Auto Mode</h6>
+            </div>
+
+            <mat-tab-group [animationDuration]="'0ms'">
+
+                <mat-tab label="Preview">
+
+                    <ng-template matTabContent>
+
+                        <div class="bg-gray-100 p-4">
+                            <div class="flex flex-col items-center mx-auto max-w-80">
+
+                                <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>
+
+                            </div>
+                        </div>
+
+                    </ng-template>
+
+                </mat-tab>
+
+                <mat-tab label="HTML">
+
+                    <!-- @formatter:off -->
+                    <textarea
+                        fuse-highlight
+                        [lang]="'html'">
+                        <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>
+                    </textarea>
+                    <!-- @formatter:on -->
+
+                </mat-tab>
+
+                <mat-tab label="Typescript">
+
+                    <!-- @formatter:off -->
+                    <textarea
+                        fuse-highlight
+                        [lang]="'ts'">
+                        apiCallStatus: string = '-';
+
+                        /**
+                         * Constructor
+                         */
+                        constructor(
+                            private _httpClient: HttpClient,
+                            private _fuseLoadingBarService: FuseLoadingBarService
+                        )
+                        { }
+
+                        ...
+
+                        /**
+                         * Set the auto mode
+                         *
+                         * @param change
+                         */
+                        setAutoMode(change: MatSlideToggleChange): void
+                        {
+                            this._fuseLoadingBarService.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);
+                                });
+                        }
+                    </textarea>
+                    <!-- @formatter:on -->
+
+                </mat-tab>
+
+            </mat-tab-group>
+
+        </div>
+
+        <div class="example-viewer">
+
+            <div class="title">
+                <h6>Manually set the progress</h6>
+            </div>
+
+            <mat-tab-group [animationDuration]="'0ms'">
+
+                <mat-tab label="Preview">
+
+                    <ng-template matTabContent>
+
+                        <div class="bg-gray-100 p-4">
+                            <div class="flex flex-col items-center mx-auto max-w-80 space-y-8">
+
+                                <div class="flex items-center space-x-4">
+                                    <button
+                                        mat-flat-button
+                                        [color]="'primary'"
+                                        (click)="showLoadingBar()">
+                                        Show loading bar
+                                    </button>
+
+                                    <button
+                                        mat-flat-button
+                                        [color]="'primary'"
+                                        (click)="hideLoadingBar()">
+                                        Hide loading bar
+                                    </button>
+                                </div>
+
+                                <mat-slide-toggle
+                                    [checked]="false"
+                                    [color]="'primary'"
+                                    (change)="toggleDeterminateMode()">
+                                    Toggle determinate mode
+                                </mat-slide-toggle>
+
+                                <mat-slider
+                                    [color]="'primary'"
+                                    (change)="setProgress($event)">
+                                    Progress value
+                                </mat-slider>
+
+                            </div>
+                        </div>
+
+                    </ng-template>
+
+                </mat-tab>
+
+                <mat-tab label="HTML">
+
+                    <!-- @formatter:off -->
+                    <textarea
+                        fuse-highlight
+                        [lang]="'html'">
+                        <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>
+                    </textarea>
+                    <!-- @formatter:on -->
+
+                </mat-tab>
+
+                <mat-tab label="Typescript">
+
+                    <!-- @formatter:off -->
+                    <textarea
+                        fuse-highlight
+                        [lang]="'ts'">
+                        mode: 'determinate' | 'indeterminate' = 'indeterminate';
+
+                        /**
+                         * Constructor
+                         */
+                        constructor( private _fuseLoadingBarService: FuseLoadingBarService ) { }
+
+                        ...
+
+                        /**
+                         * Toggle the mode
+                         */
+                        toggleMode(): void
+                        {
+                            // Show the loading bar
+                            this._fuseLoadingBarService.show();
+
+                            // Turn off the auto mode
+                            this._fuseLoadingBarService.setAutoMode(false);
+
+                            // Set the mode
+                            this.mode = this.mode === 'indeterminate' ? 'determinate' : 'indeterminate';
+                            this._fuseLoadingBarService.setMode(this.mode);
+                        }
+
+                        /**
+                         * Set the progress
+                         *
+                         * @param change
+                         */
+                        setProgress(change: MatSliderChange): void
+                        {
+                            this._fuseLoadingBarService.setProgress(change.value);
+                        }
+                    </textarea>
+                    <!-- @formatter:on -->
+
+                </mat-tab>
+
+            </mat-tab-group>
+
+        </div>
+
+
+    </div>
+
+</div>

src/app/modules/admin/ui/fuse-components/components/loading-bar/loading-bar.component.ts

@@ -0,0 +1,109 @@
+import { Component } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { MatSliderChange } from '@angular/material/slider';
+import { MatSlideToggleChange } from '@angular/material/slide-toggle';
+import { finalize } from 'rxjs/operators';
+import { FuseLoadingBarService } from '@fuse/components/loading-bar';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
+
+@Component({
+    selector   : 'loading-bar',
+    templateUrl: './loading-bar.component.html'
+})
+export class LoadingBarComponent
+{
+    apiCallStatus: string = '-';
+    mode: 'determinate' | 'indeterminate' = 'indeterminate';
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _httpClient: HttpClient,
+        private _fuseComponentsComponent: FuseComponentsComponent,
+        private _fuseLoadingBarService: FuseLoadingBarService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle the drawer
+     */
+    toggleDrawer(): void
+    {
+        // Toggle the drawer
+        this._fuseComponentsComponent.matDrawer.toggle();
+    }
+
+    /**
+     * Show the loading bar
+     */
+    showLoadingBar(): void
+    {
+        this._fuseLoadingBarService.show();
+    }
+
+    /**
+     * Hide the loading bar
+     */
+    hideLoadingBar(): void
+    {
+        this._fuseLoadingBarService.hide();
+    }
+
+    /**
+     * Set the auto mode
+     *
+     * @param change
+     */
+    setAutoMode(change: MatSlideToggleChange): void
+    {
+        this._fuseLoadingBarService.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);
+            });
+    }
+
+    /**
+     * Toggle the mode
+     */
+    toggleMode(): void
+    {
+        // Show the loading bar
+        this._fuseLoadingBarService.show();
+
+        // Turn off the auto mode
+        this._fuseLoadingBarService.setAutoMode(false);
+
+        // Set the mode
+        this.mode = this.mode === 'indeterminate' ? 'determinate' : 'indeterminate';
+        this._fuseLoadingBarService.setMode(this.mode);
+    }
+
+    /**
+     * Set the progress
+     *
+     * @param change
+     */
+    setProgress(change: MatSliderChange): void
+    {
+        this._fuseLoadingBarService.setProgress(change.value);
+    }
+}

src/app/modules/admin/ui/fuse-components/fuse-components.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { FuseNavigationItem } from '@fuse/components/navigation';
 import { MatDrawer } from '@angular/material/sidenav';
 import { Subject } from 'rxjs';
@@ -6,11 +6,10 @@ import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
-    selector       : 'fuse-components',
-    templateUrl    : './fuse-components.component.html',
-    styleUrls      : ['./fuse-components.component.scss'],
-    encapsulation  : ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush
+    selector     : 'fuse-components',
+    templateUrl  : './fuse-components.component.html',
+    styleUrls    : ['./fuse-components.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class FuseComponentsComponent implements OnInit, OnDestroy
 {
@@ -24,7 +23,6 @@ export class FuseComponentsComponent implements OnInit, OnDestroy
      * Constructor
      */
     constructor(
-        private _changeDetectorRef: ChangeDetectorRef,
         private _fuseMediaWatcherService: FuseMediaWatcherService
     )
     {
@@ -83,6 +81,12 @@ export class FuseComponentsComponent implements OnInit, OnDestroy
                         type : 'basic',
                         link : '/ui/fuse-components/components/highlight'
                     },
+                    {
+                        id   : 'fuse-components.components.loading-bar',
+                        title: 'Loading Bar',
+                        type : 'basic',
+                        link : '/ui/fuse-components/components/loading-bar'
+                    },
                     {
                         id   : 'fuse-components.components.masonry',
                         title: 'Masonry',
@@ -201,9 +205,6 @@ export class FuseComponentsComponent implements OnInit, OnDestroy
                     this.drawerMode = 'over';
                     this.drawerOpened = false;
                 }
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
             });
     }
 

src/app/modules/admin/ui/fuse-components/fuse-components.module.ts

@@ -5,6 +5,8 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSliderModule } from '@angular/material/slider';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatTreeModule } from '@angular/material/tree';
@@ -31,6 +33,7 @@ import { ScrollbarComponent } from 'app/modules/admin/ui/fuse-components/directi
 import { ScrollResetComponent } from 'app/modules/admin/ui/fuse-components/directives/scroll-reset/scroll-reset.component';
 import { ConfigComponent } from 'app/modules/admin/ui/fuse-components/services/config/config.component';
 import { ConfirmationComponent } from 'app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component';
+import { LoadingBarComponent } from 'app/modules/admin/ui/fuse-components/components/loading-bar/loading-bar.component';
 import { MediaWatcherComponent } from 'app/modules/admin/ui/fuse-components/services/media-watcher/media-watcher.component';
 import { SplashScreenComponent } from 'app/modules/admin/ui/fuse-components/services/splash-screen/splash-screen.component';
 import { FindByKeyComponent } from 'app/modules/admin/ui/fuse-components/pipes/find-by-key/find-by-key.component';
@@ -47,6 +50,7 @@ import { fuseComponentsRoutes } from 'app/modules/admin/ui/fuse-components/fuse-
         DrawerComponent,
         FullscreenComponent,
         HighlightComponent,
+        LoadingBarComponent,
         MasonryComponent,
         NavigationComponent,
         ScrollbarComponent,
@@ -58,13 +62,15 @@ import { fuseComponentsRoutes } from 'app/modules/admin/ui/fuse-components/fuse-
         FindByKeyComponent,
         MustMatchComponent
     ],
-    imports: [
+    imports     : [
         RouterModule.forChild(fuseComponentsRoutes),
         MatButtonModule,
         MatFormFieldModule,
         MatIconModule,
         MatInputModule,
         MatSelectModule,
+        MatSlideToggleModule,
+        MatSliderModule,
         MatSidenavModule,
         MatTabsModule,
         MatTreeModule,

src/app/modules/admin/ui/fuse-components/fuse-components.routing.ts

@@ -7,6 +7,7 @@ import { DateRangeComponent } from 'app/modules/admin/ui/fuse-components/compone
 import { DrawerComponent } from 'app/modules/admin/ui/fuse-components/components/drawer/drawer.component';
 import { FullscreenComponent } from 'app/modules/admin/ui/fuse-components/components/fullscreen/fullscreen.component';
 import { HighlightComponent } from 'app/modules/admin/ui/fuse-components/components/highlight/highlight.component';
+import { LoadingBarComponent } from 'app/modules/admin/ui/fuse-components/components/loading-bar/loading-bar.component';
 import { MasonryComponent } from 'app/modules/admin/ui/fuse-components/components/masonry/masonry.component';
 import { NavigationComponent } from 'app/modules/admin/ui/fuse-components/components/navigation/navigation.component';
 import { ScrollbarComponent } from 'app/modules/admin/ui/fuse-components/directives/scrollbar/scrollbar.component';
@@ -69,6 +70,10 @@ export const fuseComponentsRoutes: Route[] = [
                         path     : 'highlight',
                         component: HighlightComponent
                     },
+                    {
+                        path     : 'loading-bar',
+                        component: LoadingBarComponent
+                    },
                     {
                         path     : 'masonry',
                         component: MasonryComponent