From 54451bb19ec1bb6de384cd232661fb479d486496 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Fri, 13 Jul 2018 14:16:05 +0300
Subject: [PATCH] (FuseProgressBar) Added new component and its service
 (LoadingBarService) Removed due to the new progress bar service Added
 documentation for the FuseProgressBar

---
 src/@fuse/components/index.ts                 |  1 +
 .../progress-bar/progress-bar.component.html  |  5 +
 .../progress-bar/progress-bar.component.scss  | 17 ++++
 .../progress-bar/progress-bar.component.ts    | 93 +++++++++++++++++++
 .../progress-bar/progress-bar.module.ts       | 27 ++++++
 .../progress-bar/progress-bar.service.ts}     | 75 +++++++++++----
 src/app/app.component.html                    |  4 +
 src/app/app.module.ts                         |  3 +-
 .../components/toolbar/toolbar.component.html |  2 -
 .../components/toolbar/toolbar.component.scss | 10 +-
 .../components/toolbar/toolbar.component.ts   | 11 ---
 .../components/toolbar/toolbar.module.ts      |  3 +-
 .../components/components.module.ts           |  6 ++
 .../progress-bar/progress-bar.component.html  | 83 +++++++++++++++++
 .../progress-bar/progress-bar.component.scss  |  7 ++
 .../progress-bar/progress-bar.component.ts    | 17 ++++
 .../fuse-loading-bar.component.html           | 66 -------------
 .../fuse-loading-bar.component.scss           |  3 -
 .../fuse-loading-bar.component.ts             | 17 ----
 .../documentation/services/services.module.ts |  6 --
 src/app/navigation/navigation.ts              | 12 +--
 21 files changed, 328 insertions(+), 140 deletions(-)
 create mode 100644 src/@fuse/components/progress-bar/progress-bar.component.html
 create mode 100644 src/@fuse/components/progress-bar/progress-bar.component.scss
 create mode 100644 src/@fuse/components/progress-bar/progress-bar.component.ts
 create mode 100644 src/@fuse/components/progress-bar/progress-bar.module.ts
 rename src/@fuse/{services/loading-bar.service.ts => components/progress-bar/progress-bar.service.ts} (57%)
 create mode 100644 src/app/main/documentation/components/progress-bar/progress-bar.component.html
 create mode 100644 src/app/main/documentation/components/progress-bar/progress-bar.component.scss
 create mode 100644 src/app/main/documentation/components/progress-bar/progress-bar.component.ts
 delete mode 100644 src/app/main/documentation/services/fuse-loading-bar/fuse-loading-bar.component.html
 delete mode 100644 src/app/main/documentation/services/fuse-loading-bar/fuse-loading-bar.component.scss
 delete mode 100644 src/app/main/documentation/services/fuse-loading-bar/fuse-loading-bar.component.ts

diff --git a/src/@fuse/components/index.ts b/src/@fuse/components/index.ts
index 0a8fb885..44cb06a8 100644
--- a/src/@fuse/components/index.ts
+++ b/src/@fuse/components/index.ts
@@ -4,6 +4,7 @@ export * from './demo/demo.module';
 export * from './highlight/highlight.module';
 export * from './material-color-picker/material-color-picker.module';
 export * from './navigation/navigation.module';
+export * from './progress-bar/progress-bar.module';
 export * from './search-bar/search-bar.module';
 export * from './shortcuts/shortcuts.module';
 export * from './sidebar/sidebar.module';
diff --git a/src/@fuse/components/progress-bar/progress-bar.component.html b/src/@fuse/components/progress-bar/progress-bar.component.html
new file mode 100644
index 00000000..9b443c1a
--- /dev/null
+++ b/src/@fuse/components/progress-bar/progress-bar.component.html
@@ -0,0 +1,5 @@
+<ng-container *ngIf="visible">
+
+    <mat-progress-bar color="accent" [bufferValue]="bufferValue" [mode]="mode" [value]="value"></mat-progress-bar>
+
+</ng-container>
diff --git a/src/@fuse/components/progress-bar/progress-bar.component.scss b/src/@fuse/components/progress-bar/progress-bar.component.scss
new file mode 100644
index 00000000..361f20a4
--- /dev/null
+++ b/src/@fuse/components/progress-bar/progress-bar.component.scss
@@ -0,0 +1,17 @@
+@import "src/@fuse/scss/fuse";
+
+fuse-progress-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    z-index: 99998;
+
+    mat-progress-bar {
+
+        .mat-progress-bar-buffer {
+            background-color: #C5C6CB !important;
+        }
+    }
+}
diff --git a/src/@fuse/components/progress-bar/progress-bar.component.ts b/src/@fuse/components/progress-bar/progress-bar.component.ts
new file mode 100644
index 00000000..3ea4817e
--- /dev/null
+++ b/src/@fuse/components/progress-bar/progress-bar.component.ts
@@ -0,0 +1,93 @@
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { FuseProgressBarService } from '@fuse/components/progress-bar/progress-bar.service';
+
+@Component({
+    selector     : 'fuse-progress-bar',
+    templateUrl  : './progress-bar.component.html',
+    styleUrls    : ['./progress-bar.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class FuseProgressBarComponent implements OnInit, OnDestroy
+{
+    bufferValue: number;
+    mode: 'determinate' | 'indeterminate' | 'buffer' | 'query';
+    value: number;
+    visible: boolean;
+
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     *
+     * @param {FuseProgressBarService} _fuseProgressBarService
+     */
+    constructor(
+        private _fuseProgressBarService: FuseProgressBarService
+    )
+    {
+        // Set the defaults
+
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Subscribe to the progress bar service properties
+
+        // Buffer value
+        this._fuseProgressBarService.bufferValue
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((bufferValue) => {
+                this.bufferValue = bufferValue;
+            });
+
+        // Mode
+        this._fuseProgressBarService.mode
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((mode) => {
+                this.mode = mode;
+            });
+
+        // Value
+        this._fuseProgressBarService.value
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((value) => {
+                this.value = value;
+            });
+
+        // Visible
+        this._fuseProgressBarService.visible
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((visible) => {
+                this.visible = visible;
+            });
+
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+}
diff --git a/src/@fuse/components/progress-bar/progress-bar.module.ts b/src/@fuse/components/progress-bar/progress-bar.module.ts
new file mode 100644
index 00000000..6dcc3c9d
--- /dev/null
+++ b/src/@fuse/components/progress-bar/progress-bar.module.ts
@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+import { MatButtonModule, MatIconModule, MatProgressBarModule } from '@angular/material';
+
+import { FuseProgressBarComponent } from './progress-bar.component';
+
+@NgModule({
+    declarations: [
+        FuseProgressBarComponent
+    ],
+    imports     : [
+        CommonModule,
+        RouterModule,
+
+        MatButtonModule,
+        MatIconModule,
+        MatProgressBarModule
+    ],
+    exports     : [
+        FuseProgressBarComponent
+    ]
+})
+export class FuseProgressBarModule
+{
+}
diff --git a/src/@fuse/services/loading-bar.service.ts b/src/@fuse/components/progress-bar/progress-bar.service.ts
similarity index 57%
rename from src/@fuse/services/loading-bar.service.ts
rename to src/@fuse/components/progress-bar/progress-bar.service.ts
index f9735e58..1fde0423 100644
--- a/src/@fuse/services/loading-bar.service.ts
+++ b/src/@fuse/components/progress-bar/progress-bar.service.ts
@@ -6,9 +6,12 @@ import { filter } from 'rxjs/operators';
 @Injectable({
     providedIn: 'root'
 })
-export class FuseLoadingBarService
+export class FuseProgressBarService
 {
     // Private
+    private _bufferValue: BehaviorSubject<number>;
+    private _mode: BehaviorSubject<string>;
+    private _value: BehaviorSubject<number>;
     private _visible: BehaviorSubject<boolean>;
 
     /**
@@ -28,9 +31,50 @@ export class FuseLoadingBarService
     // @ Accessors
     // -----------------------------------------------------------------------------------------------------
 
+    /**
+     * Buffer value
+     */
+    get bufferValue(): Observable<any>
+    {
+        return this._bufferValue.asObservable();
+    }
+
+    setBufferValue(value: number): void
+    {
+        this._bufferValue.next(value);
+    }
+
+    /**
+     * Mode
+     */
+    get mode(): Observable<any>
+    {
+        return this._mode.asObservable();
+    }
+
+    setMode(value: 'determinate' | 'indeterminate' | 'buffer' | 'query'): void
+    {
+        this._mode.next(value);
+    }
+
+    /**
+     * Value
+     */
+    get value(): Observable<any>
+    {
+        return this._value.asObservable();
+    }
+
+    setValue(value: number): void
+    {
+        this._value.next(value);
+    }
+
+    /**
+     * Visible
+     */
     get visible(): Observable<any>
     {
-        // Return the _visible as observable
         return this._visible.asObservable();
     }
 
@@ -45,24 +89,23 @@ export class FuseLoadingBarService
      */
     private _init(): void
     {
-        // Initialize the behavior subject
+        // Initialize the behavior subjects
+        this._bufferValue = new BehaviorSubject(0);
+        this._mode = new BehaviorSubject('indeterminate');
+        this._value = new BehaviorSubject(0);
         this._visible = new BehaviorSubject(false);
 
         // Subscribe to the router events to show/hide the loading bar
         this._router.events
-            .pipe(
-                filter((event) => event instanceof NavigationStart)
-            )
+            .pipe(filter((event) => event instanceof NavigationStart))
             .subscribe(() => {
-                this.showLoadingBar();
+                this.show();
             });
 
         this._router.events
-            .pipe(
-                filter((event) => event instanceof NavigationEnd)
-            )
+            .pipe(filter((event) => event instanceof NavigationEnd))
             .subscribe(() => {
-                this.hideLoadingBar();
+                this.hide();
             });
     }
 
@@ -71,20 +114,18 @@ export class FuseLoadingBarService
     // -----------------------------------------------------------------------------------------------------
 
     /**
-     * Show the loading bar
+     * Show the progress bar
      */
-    showLoadingBar(): void
+    show(): void
     {
-        // Show
         this._visible.next(true);
     }
 
     /**
-     * Hide the loading bar
+     * Hide the progress bar
      */
-    hideLoadingBar(): void
+    hide(): void
     {
-        // Hide
         this._visible.next(false);
     }
 }
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 8e2890eb..bd4446ce 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,3 +1,7 @@
+<!-- PROGRESS BAR -->
+<fuse-progress-bar></fuse-progress-bar>
+<!-- / PROGRESS BAR -->
+
 <!-- VERTICAL LAYOUT 1 -->
 <ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-1'">
     <vertical-layout-1></vertical-layout-1>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index c1394600..4410d32a 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -11,7 +11,7 @@ import 'hammerjs';
 
 import { FuseModule } from '@fuse/fuse.module';
 import { FuseSharedModule } from '@fuse/shared.module';
-import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';
+import { FuseProgressBarModule, FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';
 
 import { fuseConfig } from 'app/fuse-config';
 
@@ -72,6 +72,7 @@ const appRoutes: Routes = [
 
         // Fuse modules
         FuseModule.forRoot(fuseConfig),
+        FuseProgressBarModule,
         FuseSharedModule,
         FuseSidebarModule,
         FuseThemeOptionsModule,
diff --git a/src/app/layout/components/toolbar/toolbar.component.html b/src/app/layout/components/toolbar/toolbar.component.html
index 8399ad8a..eb16b508 100644
--- a/src/app/layout/components/toolbar/toolbar.component.html
+++ b/src/app/layout/components/toolbar/toolbar.component.html
@@ -1,7 +1,5 @@
 <mat-toolbar class="p-0 mat-elevation-z1">
 
-    <mat-progress-bar *ngIf="showLoadingBar" class="loading-bar" color="accent" mode="indeterminate"></mat-progress-bar>
-
     <div fxFlex fxFill fxLayout="row" fxLayoutAlign="start center">
 
         <div fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
diff --git a/src/app/layout/components/toolbar/toolbar.component.scss b/src/app/layout/components/toolbar/toolbar.component.scss
index 8f6f583c..0174a02e 100644
--- a/src/app/layout/components/toolbar/toolbar.component.scss
+++ b/src/app/layout/components/toolbar/toolbar.component.scss
@@ -11,17 +11,9 @@
     }
 
     .mat-toolbar {
+        position: relative;
         background: inherit;
         color: inherit;
-        position: relative;
-
-        .loading-bar {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            width: 100%;
-        }
     }
 
     .logo {
diff --git a/src/app/layout/components/toolbar/toolbar.component.ts b/src/app/layout/components/toolbar/toolbar.component.ts
index 1c06dfcb..81fdd0d7 100644
--- a/src/app/layout/components/toolbar/toolbar.component.ts
+++ b/src/app/layout/components/toolbar/toolbar.component.ts
@@ -8,7 +8,6 @@ import { FuseConfigService } from '@fuse/services/config.service';
 import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
 
 import { navigation } from 'app/navigation/navigation';
-import { FuseLoadingBarService } from '@fuse/services/loading-bar.service';
 
 @Component({
     selector   : 'toolbar',
@@ -24,7 +23,6 @@ export class ToolbarComponent implements OnInit, OnDestroy
     languages: any;
     navigation: any;
     selectedLanguage: any;
-    showLoadingBar: boolean;
     userStatusOptions: any[];
 
     // Private
@@ -34,13 +32,11 @@ export class ToolbarComponent implements OnInit, OnDestroy
      * Constructor
      *
      * @param {FuseConfigService} _fuseConfigService
-     * @param {FuseLoadingBarService} _fuseLoadingBarService
      * @param {FuseSidebarService} _fuseSidebarService
      * @param {TranslateService} _translateService
      */
     constructor(
         private _fuseConfigService: FuseConfigService,
-        private _fuseLoadingBarService: FuseLoadingBarService,
         private _fuseSidebarService: FuseSidebarService,
         private _translateService: TranslateService
     )
@@ -102,13 +98,6 @@ export class ToolbarComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to the Fuse loading bar service
-        this._fuseLoadingBarService.visible
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((visible) => {
-                this.showLoadingBar = visible;
-            });
-
         // Subscribe to the config changes
         this._fuseConfigService.config
             .pipe(takeUntil(this._unsubscribeAll))
diff --git a/src/app/layout/components/toolbar/toolbar.module.ts b/src/app/layout/components/toolbar/toolbar.module.ts
index 17e36e0c..b7b63cfb 100644
--- a/src/app/layout/components/toolbar/toolbar.module.ts
+++ b/src/app/layout/components/toolbar/toolbar.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { MatButtonModule, MatIconModule, MatMenuModule, MatProgressBarModule, MatToolbarModule } from '@angular/material';
+import { MatButtonModule, MatIconModule, MatMenuModule, MatToolbarModule } from '@angular/material';
 
 import { FuseSearchBarModule, FuseShortcutsModule } from '@fuse/components';
 import { FuseSharedModule } from '@fuse/shared.module';
@@ -16,7 +16,6 @@ import { ToolbarComponent } from 'app/layout/components/toolbar/toolbar.componen
         MatButtonModule,
         MatIconModule,
         MatMenuModule,
-        MatProgressBarModule,
         MatToolbarModule,
 
         FuseSharedModule,
diff --git a/src/app/main/documentation/components/components.module.ts b/src/app/main/documentation/components/components.module.ts
index d1d695ab..2c6c03e8 100644
--- a/src/app/main/documentation/components/components.module.ts
+++ b/src/app/main/documentation/components/components.module.ts
@@ -11,6 +11,7 @@ import { DocsComponentsCountdownComponent } from 'app/main/documentation/compone
 import { DocsComponentsHighlightComponent } from 'app/main/documentation/components/highlight/highlight.component';
 import { DocsComponentsMaterialColorPickerComponent } from 'app/main/documentation/components/material-color-picker/material-color-picker.component';
 import { DocsComponentsNavigationComponent } from 'app/main/documentation/components/navigation/navigation.component';
+import { DocsComponentsProgressBarComponent } from 'app/main/documentation/components/progress-bar/progress-bar.component';
 import { DocsComponentsSearchBarComponent } from 'app/main/documentation/components/search-bar/search-bar.component';
 import { DocsComponentsSidebarComponent } from 'app/main/documentation/components/sidebar/sidebar.component';
 import { DocsComponentsShortcutsComponent } from 'app/main/documentation/components/shortcuts/shortcuts.component';
@@ -37,6 +38,10 @@ const routes = [
         path     : 'navigation',
         component: DocsComponentsNavigationComponent
     },
+    {
+        path     : 'progress-bar',
+        component: DocsComponentsProgressBarComponent
+    },
     {
         path     : 'search-bar',
         component: DocsComponentsSearchBarComponent
@@ -62,6 +67,7 @@ const routes = [
         DocsComponentsHighlightComponent,
         DocsComponentsMaterialColorPickerComponent,
         DocsComponentsNavigationComponent,
+        DocsComponentsProgressBarComponent,
         DocsComponentsSearchBarComponent,
         DocsComponentsSidebarComponent,
         DocsComponentsShortcutsComponent,
diff --git a/src/app/main/documentation/components/progress-bar/progress-bar.component.html b/src/app/main/documentation/components/progress-bar/progress-bar.component.html
new file mode 100644
index 00000000..2ec56932
--- /dev/null
+++ b/src/app/main/documentation/components/progress-bar/progress-bar.component.html
@@ -0,0 +1,83 @@
+<div id="progress-bar" class="page-layout simple fullwidth docs">
+
+    <!-- HEADER -->
+    <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
+        <div fxLayout="column" fxLayoutAlign="center start">
+            <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
+                <mat-icon class="secondary-text s-18">home</mat-icon>
+                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
+                <span class="secondary-text">Documentation</span>
+                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
+                <span class="secondary-text">Components</span>
+            </div>
+            <div class="h2 mt-16">Progress Bar</div>
+        </div>
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT -->
+    <div class="content p-24">
+
+        <p>
+            <code>fuse-progress-bar</code> is a custom built Fuse component allows you to have a service controlled
+            progress bar. It internally uses <code>mat-progress-bar</code> and provides a global service to control it.
+        </p>
+
+        <p class="message-box info">
+            Due to the nature of global progress bars, <code>fuse-progress-bar</code> can only be used once in the
+            entire app and it's currently located at <code>app.component.html</code> file.
+        </p>
+
+        <div class="section-title">Usage</div>
+        <p class="py-8">
+            <fuse-highlight lang="html">
+                <textarea #source>
+                    <fuse-progress-bar></fuse-progress-bar>
+                </textarea>
+            </fuse-highlight>
+        </p>
+
+        <div class="section-title">Service Usage</div>
+        <p class="mat-grey-200-bg py-8">
+
+            <fuse-highlight lang="typescript">
+                <textarea #source>
+                    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);
+                        }
+                    }
+                </textarea>
+            </fuse-highlight>
+
+        </p>
+
+    </div>
+
+</div>
+
diff --git a/src/app/main/documentation/components/progress-bar/progress-bar.component.scss b/src/app/main/documentation/components/progress-bar/progress-bar.component.scss
new file mode 100644
index 00000000..38d84b8f
--- /dev/null
+++ b/src/app/main/documentation/components/progress-bar/progress-bar.component.scss
@@ -0,0 +1,7 @@
+:host {
+
+    .content{
+        max-width: 1100px;
+    }
+
+}
diff --git a/src/app/main/documentation/components/progress-bar/progress-bar.component.ts b/src/app/main/documentation/components/progress-bar/progress-bar.component.ts
new file mode 100644
index 00000000..0c42f2e0
--- /dev/null
+++ b/src/app/main/documentation/components/progress-bar/progress-bar.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'docs-components-progress-bar',
+    templateUrl: './progress-bar.component.html',
+    styleUrls  : ['./progress-bar.component.scss']
+})
+export class DocsComponentsProgressBarComponent
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+
+    }
+}
diff --git a/src/app/main/documentation/services/fuse-loading-bar/fuse-loading-bar.component.html b/src/app/main/documentation/services/fuse-loading-bar/fuse-loading-bar.component.html
deleted file mode 100644
index ee110003..00000000
--- a/src/app/main/documentation/services/fuse-loading-bar/fuse-loading-bar.component.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<div id="fuse-loading-bar" class="page-layout simple fullwidth docs">
-
-    <!-- HEADER -->
-    <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
-        <div fxLayout="column" fxLayoutAlign="center start">
-            <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
-                <mat-icon class="secondary-text s-18">home</mat-icon>
-                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
-                <span class="secondary-text">Documentation</span>
-                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
-                <span class="secondary-text">Services</span>
-            </div>
-            <div class="h2 mt-16">Fuse Loading Bar</div>
-        </div>
-    </div>
-    <!-- / HEADER -->
-
-    <!-- CONTENT -->
-    <div class="content p-24">
-
-        <p>
-            <code>Loading bar</code> is a custom Fuse service that allows to have a control on the loading bar that is
-            placed in the Toolbar by default.
-        </p>
-
-        <div class="section-title">Usage</div>
-        <p class="mat-grey-200-bg py-8">
-
-            <fuse-highlight lang="typescript">
-                <textarea #source>
-
-                    export class SomeComponent implements OnInit
-                    {
-                        constructor(
-                            private _fuseLoadingBarService: FuseLoadingBarService
-                        ) {}
-
-                        ngOnInit()
-                        {
-                            // Subscribe to the Fuse loading bar service
-                            this._fuseLoadingBarService.visible
-                                .subscribe((visible) => {
-                                    this.showLoadingBar = visible;
-                            });
-                        }
-
-                        showLoadingBar()
-                        {
-                            this._fuseLoadingBarService.showLoadingBar();
-                        }
-
-                        hideLoadingBar()
-                        {
-                            this._fuseLoadingBarService.hideLoadingBar();
-                        }
-                    }
-
-                </textarea>
-            </fuse-highlight>
-
-        </p>
-
-    </div>
-
-</div>
-
diff --git a/src/app/main/documentation/services/fuse-loading-bar/fuse-loading-bar.component.scss b/src/app/main/documentation/services/fuse-loading-bar/fuse-loading-bar.component.scss
deleted file mode 100644
index 8fdbe2d4..00000000
--- a/src/app/main/documentation/services/fuse-loading-bar/fuse-loading-bar.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
-
-}
\ No newline at end of file
diff --git a/src/app/main/documentation/services/fuse-loading-bar/fuse-loading-bar.component.ts b/src/app/main/documentation/services/fuse-loading-bar/fuse-loading-bar.component.ts
deleted file mode 100644
index aaa838b5..00000000
--- a/src/app/main/documentation/services/fuse-loading-bar/fuse-loading-bar.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector   : 'fuse-loading-bar-service-docs',
-    templateUrl: './fuse-loading-bar.component.html',
-    styleUrls  : ['./fuse-loading-bar.component.scss']
-})
-export class FuseLoadingBarServiceDocsComponent
-{
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-
-    }
-}
diff --git a/src/app/main/documentation/services/services.module.ts b/src/app/main/documentation/services/services.module.ts
index b3798a56..465fef74 100644
--- a/src/app/main/documentation/services/services.module.ts
+++ b/src/app/main/documentation/services/services.module.ts
@@ -6,7 +6,6 @@ import { FuseSharedModule } from '@fuse/shared.module';
 import { FuseHighlightModule } from '@fuse/components/index';
 
 import { FuseConfigServiceDocsComponent } from 'app/main/documentation/services/fuse-config/fuse-config.component';
-import { FuseLoadingBarServiceDocsComponent } from 'app/main/documentation/services/fuse-loading-bar/fuse-loading-bar.component';
 import { FuseSplashScreenServiceDocsComponent } from 'app/main/documentation/services/fuse-splash-screen/fuse-splash-screen.component';
 
 const routes = [
@@ -14,10 +13,6 @@ const routes = [
         path     : 'fuse-config',
         component: FuseConfigServiceDocsComponent
     },
-    {
-        path     : 'fuse-loading-bar',
-        component: FuseLoadingBarServiceDocsComponent
-    },
     {
         path     : 'fuse-splash-screen',
         component: FuseSplashScreenServiceDocsComponent
@@ -27,7 +22,6 @@ const routes = [
 @NgModule({
     declarations: [
         FuseConfigServiceDocsComponent,
-        FuseLoadingBarServiceDocsComponent,
         FuseSplashScreenServiceDocsComponent
     ],
     imports     : [
diff --git a/src/app/navigation/navigation.ts b/src/app/navigation/navigation.ts
index b67a7dec..1e314cce 100644
--- a/src/app/navigation/navigation.ts
+++ b/src/app/navigation/navigation.ts
@@ -960,6 +960,12 @@ export const navigation: FuseNavigation[] = [
                         type : 'item',
                         url  : '/documentation/components/navigation'
                     },
+                    {
+                        id   : 'progress-bar',
+                        title: 'Progress Bar',
+                        type : 'item',
+                        url  : '/documentation/components/progress-bar'
+                    },
                     {
                         id   : 'search-bar',
                         title: 'Search Bar',
@@ -1057,12 +1063,6 @@ export const navigation: FuseNavigation[] = [
                         type : 'item',
                         url  : '/documentation/services/fuse-config'
                     },
-                    {
-                        id   : 'fuse-loading-bar',
-                        title: 'Fuse Loading Bar',
-                        type : 'item',
-                        url  : '/documentation/services/fuse-loading-bar'
-                    },
                     {
                         id   : 'fuse-splash-screen',
                         title: 'Fuse Splash Screen',