Merge pull request #3365 from danny007in/preload-improve

Preload improve

build/js/Layout.js

@@ -39,6 +39,7 @@ const Default = {
   scrollbarAutoHide: 'l',
   panelAutoHeight: true,
   panelAutoHeightMode: 'min-height',
+  preloadDuration: 200,
   loginRegisterAutoHeight: true
 }
 
@@ -174,13 +175,16 @@ class Layout {
     setTimeout(() => {
       $('body.hold-transition').removeClass('hold-transition')
     }, 50)
-    const $preloader = $(SELECTOR_PRELOADER)
-    if ($preloader) {
-      $preloader.css('height', 0)
-      setTimeout(() => {
-        $preloader.children().hide()
-      }, 200)
-    }
+
+    setTimeout(() => {
+      const $preloader = $(SELECTOR_PRELOADER)
+      if ($preloader) {
+        $preloader.css('height', 0)
+        setTimeout(() => {
+          $preloader.children().hide()
+        }, 200)
+      }
+    }, this._config.preloadDuration)
   }
 
   _max(numbers) {

build/scss/_animation-effects.scss

@@ -0,0 +1,14 @@
+//
+// Component: Animation
+//
+
+.animation {
+  &__shake {
+    animation: shake 1500ms;
+  }
+  &__wobble {
+    animation: wobble 1500ms;
+  }
+}
+
+//

build/scss/_dropdown.scss

@@ -121,32 +121,6 @@
   backface-visibility: visible !important;
 }
 
-@keyframes flipInX {
-  0% {
-    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-    transition-timing-function: ease-in;
-    opacity: 0;
-  }
-
-  40% {
-    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-    transition-timing-function: ease-in;
-  }
-
-  60% {
-    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
-    opacity: 1;
-  }
-
-  80% {
-    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
-  }
-
-  100% {
-    transform: perspective(400px);
-  }
-}
-
 // Fix dropdown menu in navbars
 .navbar-custom-menu > .navbar-nav {
   > li {

build/scss/_layout.scss

@@ -12,20 +12,6 @@ body,
   min-height: 100%;
 }
 
-.preloader {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: $main-bg;
-  height: 100vh;
-  width: 100%;
-  transition: height 200ms linear;
-  position: fixed;
-  left: 0;
-  top: 0;
-  z-index: $zindex-preloader;
-}
-
 .wrapper {
   position: relative;
 
@@ -662,7 +648,7 @@ body:not(.layout-fixed) {
 }
 
 .dark-mode {
-  background-color: lighten($dark, 7.5%) !important;
+  background-color: $dark-main-bg;
   color: $white;
 
   .breadcrumb-item {
@@ -683,8 +669,4 @@ body:not(.layout-fixed) {
       color: $white;
     }
   }
-  .preloader {
-    background-color: $dark;
-    color: $white;
-  }
 }

build/scss/_mixins.scss

@@ -2,6 +2,7 @@
 // General: Mixins
 //
 
+@import "mixins/animations";
 @import "mixins/cards";
 @import "mixins/sidebar";
 @import "mixins/navbar";

build/scss/_preloader.scss

@@ -0,0 +1,24 @@
+//
+// Core: Preloader
+//
+
+.preloader {
+  display: flex;
+  background-color: $main-bg;
+  height: 100vh;
+  width: 100%;
+  transition: height 200ms linear;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: $zindex-preloader;
+}
+
+.dark-mode {
+  .preloader {
+    background-color: $dark-main-bg;
+    color: $white;
+  }
+}
+
+//

build/scss/_sidebar-mini.scss

@@ -67,26 +67,6 @@
   }
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-  }
-}
-
 .sidebar-mini,
 .sidebar-mini-md,
 .sidebar-mini-xs {

build/scss/_variables.scss

@@ -50,6 +50,8 @@ $boxed-layout-max-width: 1250px !default;
 // Body background (Affects main content background only)
 $main-bg: #f4f6f9 !default;
 
+$dark-main-bg: lighten($dark, 7.5%) !important;
+
 // Content padding
 $content-padding-y: 0 !default;
 $content-padding-x: $navbar-padding-x !default;

build/scss/mixins/_animations.scss

@@ -0,0 +1,119 @@
+//
+// Mixins: Animation
+//
+
+
+@keyframes flipInX {
+  0% {
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transition-timing-function: ease-in;
+    opacity: 0;
+  }
+
+  40% {
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transition-timing-function: ease-in;
+  }
+
+  60% {
+    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    opacity: 1;
+  }
+
+  80% {
+    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+  }
+
+  100% {
+    transform: perspective(400px);
+  }
+}
+
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes shake {
+  0% {
+    transform: translate(2px, 1px) rotate(0deg);
+  }
+  10% {
+    transform: translate(-1px, -2px) rotate(-2deg);
+  }
+  20% {
+    transform: translate(-3px, 0) rotate(3deg);
+  }
+  30% {
+    transform: translate(0, 2px) rotate(0deg);
+  }
+  40% {
+    transform: translate(1px, -1px) rotate(1deg);
+  }
+  50% {
+    transform: translate(-1px, 2px) rotate(-1deg);
+  }
+  60% {
+    transform: translate(-3px, 1px) rotate(0deg);
+  }
+  70% {
+    transform: translate(2px, 1px) rotate(-2deg);
+  }
+  80% {
+    transform: translate(-1px, -1px) rotate(4deg);
+  }
+  90% {
+    transform: translate(2px, 2px) rotate(0deg);
+  }
+  100% {
+    transform: translate(1px, -2px) rotate(-1deg);
+  }
+}
+
+@keyframes wobble {
+  0% {
+    transform: none;
+  }
+
+  15% {
+    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+  }
+
+  30% {
+    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+  }
+
+  45% {
+    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+  }
+
+  60% {
+    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+  }
+
+  75% {
+    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+  }
+
+  100% {
+    transform: none;
+  }
+}
+
+//

build/scss/parts/_core.scss

@@ -2,6 +2,8 @@
 // Part: Core
 //
 
+@import "../animation-effects";
+@import "../preloader";
 @import "../layout";
 @import "../main-header";
 @import "../brand";

index.html

@@ -30,8 +30,8 @@
 <div class="wrapper">
 
   <!-- Preloader -->
-  <div class="preloader">
-    <img src="dist/img/AdminLTELogo.png" alt="AdminLTELogo" height="60" width="60">
+  <div class="preloader flex-column justify-content-center align-items-center">
+    <img class="animation__shake" src="dist/img/AdminLTELogo.png" alt="AdminLTELogo" height="60" width="60">
   </div>
 
   <!-- Navbar -->

index2.html

@@ -14,10 +14,16 @@
   <!-- Theme style -->
   <link rel="stylesheet" href="dist/css/adminlte.min.css">
 </head>
-<body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed layout-footer-fixed">
+<body class="hold-transition dark-mode sidebar-mini layout-fixed layout-navbar-fixed layout-footer-fixed">
 <div class="wrapper">
+
+  <!-- Preloader -->
+  <div class="preloader flex-column justify-content-center align-items-center">
+    <img class="animation__wobble" src="dist/img/AdminLTELogo.png" alt="AdminLTELogo" height="60" width="60">
+  </div>
+
   <!-- Navbar -->
-  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
+  <nav class="main-header navbar navbar-expand navbar-dark">
     <!-- Left navbar links -->
     <ul class="navbar-nav">
       <li class="nav-item">