splash screen

src/app/app.component.ts

@@ -1,31 +1,14 @@
-import { Component, ElementRef, OnInit, Renderer2 } from '@angular/core';
+import { Component } from '@angular/core';
+import { FuseSplashScreenService } from './core/services/splash-screen.service';
 
 @Component({
-    selector   : 'body',
+    selector   : 'fuse-root',
     templateUrl: './app.component.html',
     styleUrls  : ['./app.component.scss']
 })
-export class AppComponent implements OnInit
+export class AppComponent
 {
-    constructor(
+    constructor(private fuseSplashScreen: FuseSplashScreenService)
-        private _renderer: Renderer2,
-        private _elementRef: ElementRef
-    )
     {
     }
-
-    addClass(className: string)
-    {
-        this._renderer.addClass(this._elementRef.nativeElement, className);
-    }
-
-    removeClass(className: string)
-    {
-        this._renderer.removeClass(this._elementRef.nativeElement, className);
-    }
-
-    ngOnInit()
-    {
-
-    }
 }

src/app/app.module.ts

@@ -17,6 +17,7 @@ import { FuseMainModule } from './main/main.module';
 import { PagesModule } from './main/content/pages/pages.module';
 import { UIModule } from './main/content/ui/ui.module';
 import { ComponentsModule } from './main/content/components/components.module';
+import { FuseSplashScreenService } from './core/services/splash-screen.service';
 
 const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
     suppressScrollX: true
@@ -77,6 +78,9 @@ const appRoutes: Routes = [
         UIModule,
         ComponentsModule
     ],
+    providers: [
+        FuseSplashScreenService
+    ],
     bootstrap   : [
         AppComponent
     ]

src/app/core/services/splash-screen.service.ts

@@ -0,0 +1,65 @@
+import { Inject, Injectable } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
+import { NavigationEnd, Router } from '@angular/router';
+
+@Injectable()
+export class FuseSplashScreenService
+{
+    splashScreenEl;
+    public player: AnimationPlayer;
+
+    constructor(
+        private animationBuilder: AnimationBuilder,
+        @Inject(DOCUMENT) private document: any,
+        private router: Router
+    )
+    {
+        this.splashScreenEl = this.document.body.querySelector('#fuse-splash-screen');
+
+        const hideOnLoad = this.router.events.subscribe((event) => {
+                if ( event instanceof NavigationEnd )
+                {
+                    setTimeout(() => {
+                        this.hide();
+                        hideOnLoad.unsubscribe();
+                    }, 0);
+                }
+            }
+        );
+    }
+
+    show()
+    {
+        this.player =
+            this.animationBuilder
+                .build([
+                    style({
+                        opacity: '0',
+                        zIndex : '99999'
+                    }),
+                    animate('400ms ease', style({opacity: '1'}))
+                ]).create(this.splashScreenEl);
+
+        setTimeout(() => {
+            this.player.play();
+        }, 0);
+    }
+
+    hide()
+    {
+        this.player =
+            this.animationBuilder
+                .build([
+                    style({opacity: '1'}),
+                    animate('400ms ease', style({
+                        opacity: '0',
+                        zIndex : '-10'
+                    }))
+                ]).create(this.splashScreenEl);
+
+        setTimeout(() => {
+            this.player.play();
+        }, 0);
+    }
+}

src/app/main/content/content.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-// import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
+import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
 import { NavigationEnd, Router } from '@angular/router';
 
 @Component({
@@ -10,8 +10,8 @@ import { NavigationEnd, Router } from '@angular/router';
 export class FuseContentComponent implements OnInit
 {
     constructor(
-        private router: Router
+        private router: Router,
-        // private perfectScrollbarDirective: PerfectScrollbarDirective
+        private perfectScrollbarDirective: PerfectScrollbarDirective
     )
     {
 
@@ -23,7 +23,7 @@ export class FuseContentComponent implements OnInit
                 if ( event instanceof NavigationEnd )
                 {
                     setTimeout(() => {
-                        // this.perfectScrollbarDirective.scrollToTop();
+                        this.perfectScrollbarDirective.scrollToTop();
                     }, 0);
                 }
             }

src/app/main/main.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
 import { FuseLayoutService } from '../core/services/layout.service';
 import { Subscription } from 'rxjs/Subscription';
 
@@ -13,7 +13,11 @@ export class FuseMainComponent implements OnInit, OnDestroy
     onSettingsChanged: Subscription;
     layoutSettings: { navigation: string, toolbar: string, footer: string };
 
-    constructor(private layoutService: FuseLayoutService)
+    constructor(
+        private layoutService: FuseLayoutService,
+        private _renderer: Renderer2,
+        private _elementRef: ElementRef
+    )
     {
         this.onSettingsChanged =
             this.layoutService.onSettingsChanged
@@ -32,4 +36,14 @@ export class FuseMainComponent implements OnInit, OnDestroy
     {
         this.onSettingsChanged.unsubscribe();
     }
+
+    addClass(className: string)
+    {
+        this._renderer.addClass(this._elementRef.nativeElement, className);
+    }
+
+    removeClass(className: string)
+    {
+        this._renderer.removeClass(this._elementRef.nativeElement, className);
+    }
 }

src/app/main/main.module.ts

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
+
+import { SharedModule } from '../core/modules/shared.module';
+
 import { FuseMainComponent } from './main.component';
 import { FuseContentComponent } from './content/content.component';
 import { FuseFooterComponent } from './footer/footer.component';

src/app/main/navbar/navbar.component.scss

@@ -1,6 +1,6 @@
 @import "../../core/scss/fuse";
 
-body {
+fuse-main {
 
     &.fuse-nav-bar-folded {
 

src/app/main/navbar/navbar.component.ts

@@ -1,9 +1,9 @@
 import { Component, HostBinding, HostListener, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { AppComponent } from '../../app.component';
 import { Subscription } from 'rxjs/Subscription';
 import { FuseMatchMedia } from '../../core/services/match-media.service';
 import { FuseNavbarService } from './navbar.service';
 import { ObservableMedia } from '@angular/flex-layout';
+import { FuseMainComponent } from '../main.component';
 
 @Component({
     selector     : 'fuse-navbar',
@@ -22,7 +22,7 @@ export class FuseNavbarComponent implements OnInit, OnDestroy
     matchMediaWatcher: Subscription;
 
     constructor(
-        private bodyEl: AppComponent,
+        private fuseMainComponentEl: FuseMainComponent,
         private fuseMatchMedia: FuseMatchMedia,
         private navBarService: FuseNavbarService,
         public media: ObservableMedia
@@ -117,14 +117,14 @@ export class FuseNavbarComponent implements OnInit, OnDestroy
     activateFolded()
     {
         this.isFoldedActive = true;
-        this.bodyEl.addClass('fuse-nav-bar-folded');
+        this.fuseMainComponentEl.addClass('fuse-nav-bar-folded');
         this.isFoldedOpen = false;
     }
 
     deActivateFolded()
     {
         this.isFoldedActive = false;
-        this.bodyEl.removeClass('fuse-nav-bar-folded');
+        this.fuseMainComponentEl.removeClass('fuse-nav-bar-folded');
         this.isFoldedOpen = false;
     }
 
@@ -144,13 +144,13 @@ export class FuseNavbarComponent implements OnInit, OnDestroy
     {
         if ( this.isClosed )
         {
-            this.bodyEl.addClass('fuse-nav-bar-opened');
+            this.fuseMainComponentEl.addClass('fuse-nav-bar-opened');
-            this.bodyEl.removeClass('fuse-nav-bar-closed');
+            this.fuseMainComponentEl.removeClass('fuse-nav-bar-closed');
         }
         else
         {
-            this.bodyEl.addClass('fuse-nav-bar-closed');
+            this.fuseMainComponentEl.addClass('fuse-nav-bar-closed');
-            this.bodyEl.removeClass('fuse-nav-bar-opened');
+            this.fuseMainComponentEl.removeClass('fuse-nav-bar-opened');
         }
     }
 

src/app/main/toolbar/toolbar.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { NavigationEnd, NavigationStart, Router } from '@angular/router';
+import { FuseSplashScreenService } from '../../core/services/splash-screen.service';
 
 @Component({
     selector   : 'fuse-toolbar',
@@ -16,7 +17,6 @@ export class FuseToolbarComponent
 
     constructor(private router: Router)
     {
-
         this.userStatusOptions = [
             {
                 'title': 'Online',

src/index.html

@@ -14,8 +14,209 @@
         <link href="/assets/icons/meteocons/style.css" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
 
+        <!-- FUSE Splash Screen CSS -->
+        <style type="text/css">
+            #fuse-splash-screen {
+                display: block;
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background-color: #3C4252;
+                z-index: 99999;
+                pointer-events: none;
+            }
+
+            #fuse-splash-screen .center {
+                display: block;
+                width: 100%;
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+            }
+
+            #fuse-splash-screen .logo {
+                width: 96px;
+                height: 96px;
+                line-height: 96px;
+                margin: 0 auto;
+                font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+                font-size: 56px;
+                text-align: center;
+                border-radius: 2px;
+                background-color: #039BE5;
+                color: #FFFFFF;
+                box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.22);
+            }
+
+            #fuse-splash-screen .spinner-wrapper {
+                display: block;
+                position: relative;
+                width: 100%;
+                min-height: 100px;
+                height: 100px;
+            }
+
+            #fuse-splash-screen .spinner-wrapper .spinner {
+                position: absolute;
+                overflow: hidden;
+                left: 50%;
+                margin-left: -50px;
+                animation: outer-rotate 2.91667s linear infinite;
+            }
+
+            #fuse-splash-screen .spinner-wrapper .spinner .inner {
+                width: 100px;
+                height: 100px;
+                position: relative;
+                animation: sporadic-rotate 5.25s cubic-bezier(0.35, 0, 0.25, 1) infinite;
+            }
+
+            #fuse-splash-screen .spinner-wrapper .spinner .inner .gap {
+                position: absolute;
+                left: 49px;
+                right: 49px;
+                top: 0;
+                bottom: 0;
+                border-top: 10px solid;
+                box-sizing: border-box;
+            }
+
+            #fuse-splash-screen .spinner-wrapper .spinner .inner .left,
+            #fuse-splash-screen .spinner-wrapper .spinner .inner .right {
+                position: absolute;
+                top: 0;
+                height: 100px;
+                width: 50px;
+                overflow: hidden;
+            }
+
+            #fuse-splash-screen .spinner-wrapper .spinner .inner .left .half-circle,
+            #fuse-splash-screen .spinner-wrapper .spinner .inner .right .half-circle {
+                position: absolute;
+                top: 0;
+                width: 100px;
+                height: 100px;
+                box-sizing: border-box;
+                border: 10px solid #4285F4;
+                border-bottom-color: transparent;
+                border-radius: 50%;
+            }
+
+            #fuse-splash-screen .spinner-wrapper .spinner .inner .left {
+                left: 0;
+            }
+
+            #fuse-splash-screen .spinner-wrapper .spinner .inner .left .half-circle {
+                left: 0;
+                border-right-color: transparent;
+                animation: left-wobble 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite;
+                -webkit-animation: left-wobble 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite;
+            }
+
+            #fuse-splash-screen .spinner-wrapper .spinner .inner .right {
+                right: 0;
+            }
+
+            #fuse-splash-screen .spinner-wrapper .spinner .inner .right .half-circle {
+                right: 0;
+                border-left-color: transparent;
+                animation: right-wobble 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite;
+                -webkit-animation: right-wobble 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite;
+            }
+
+            @keyframes outer-rotate {
+                0% {
+                    transform: rotate(0deg) scale(0.5);
+                }
+                100% {
+                    transform: rotate(360deg) scale(0.5);
+                }
+            }
+
+            @keyframes left-wobble {
+                0%, 100% {
+                    transform: rotate(130deg);
+                }
+                50% {
+                    transform: rotate(-5deg);
+                }
+            }
+
+            @keyframes right-wobble {
+                0%, 100% {
+                    transform: rotate(-130deg);
+                }
+                50% {
+                    transform: rotate(5deg);
+                }
+            }
+
+            @keyframes sporadic-rotate {
+                12.5% {
+                    transform: rotate(135deg);
+                }
+                25% {
+                    transform: rotate(270deg);
+                }
+                37.5% {
+                    transform: rotate(405deg);
+                }
+                50% {
+                    transform: rotate(540deg);
+                }
+                62.5% {
+                    transform: rotate(675deg);
+                }
+                75% {
+                    transform: rotate(810deg);
+                }
+                87.5% {
+                    transform: rotate(945deg);
+                }
+                100% {
+                    transform: rotate(1080deg);
+                }
+            }
+        </style>
+        <!-- / FUSE Splash Screen CSS -->
     </head>
 
-    <body></body>
+    <body>
+
+        <!-- FUSE Splash Screen -->
+        <fuse-splash-screen id="fuse-splash-screen">
+
+            <div class="center">
+
+                <div class="logo">
+                    <span>F</span>
+                </div>
+
+                <!-- Material Design Spinner -->
+                <div class="spinner-wrapper">
+                    <div class="spinner">
+                        <div class="inner">
+                            <div class="gap"></div>
+                            <div class="left">
+                                <div class="half-circle"></div>
+                            </div>
+                            <div class="right">
+                                <div class="half-circle"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- / Material Design Spinner -->
+
+            </div>
+
+        </fuse-splash-screen>
+        <!-- / FUSE Splash Screen -->
+
+        <fuse-root></fuse-root>
+
+    </body>
 
 </html>