Merge pull request ColorlibHQ#3284 from danny007in/preloader-add

Preloader Added
MMmajiali · Jan 19, 2021 · c104f19 · c104f19
2 parents 76de56d + e932382
commit c104f19
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 0 deletions.
diff --git a/build/js/Layout.js b/build/js/Layout.js
@@ -26,6 +26,7 @@ const SELECTOR_FOOTER = '.main-footer'
 const SELECTOR_PUSHMENU_BTN = '[data-widget="pushmenu"]'
 const SELECTOR_LOGIN_BOX = '.login-box'
 const SELECTOR_REGISTER_BOX = '.register-box'
+const SELECTOR_PRELOADER = '.preloader'
 
 const CLASS_NAME_SIDEBAR_COLLAPSED = 'sidebar-collapse'
 const CLASS_NAME_SIDEBAR_FOCUSED = 'sidebar-focused'
@@ -173,6 +174,13 @@ 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)
+    }
   }
 
   _max(numbers) {

diff --git a/build/scss/_layout.scss b/build/scss/_layout.scss
@@ -12,6 +12,20 @@ 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;
 
@@ -669,4 +683,8 @@ body:not(.layout-fixed) {
       color: $white;
     }
   }
+  .preloader {
+    background-color: $dark;
+    color: $white;
+  }
 }
diff --git a/build/scss/_variables.scss b/build/scss/_variables.scss
@@ -170,6 +170,7 @@ $zindex-main-sidebar: $zindex-fixed + 8 !default;
 $zindex-main-footer: $zindex-fixed + 2 !default;
 $zindex-control-sidebar: $zindex-fixed + 1 !default;
 $zindex-toasts: $zindex-main-sidebar + 2 !default;
+$zindex-preloader: 9999 !default;
 
 // TRANSITIONS SETTINGS
 // --------------------------------------------------------

diff --git a/docs/layout.md b/docs/layout.md
@@ -48,6 +48,23 @@ You can also use the following classes for responsive changes with placing
 {: .quote-info}
 
 
+#### Preloader
+
+Preloader to avoid [https://github.com/ColorlibHQ/AdminLTE/discussions/3319](https://github.com/ColorlibHQ/AdminLTE/discussions/3319)
+
+```html
+<div class="wrapper">
+  <!-- Preloader -->
+  <div class="preloader">
+    <img src="dist/img/AdminLTELogo.png" alt="AdminLTELogo" height="60" width="60">
+  </div>
+</div>
+```
+
+- Preloader elements should be added inside `.wrapper` element.
+- You can replace image OR modify size OR include any preload items inside `.preloader` element.
+
+
 #### Dark Mode
 
 AdminLTE 3.1 provides a dark mode option. You can add in body tag:

diff --git a/index.html b/index.html
@@ -29,6 +29,11 @@
 <body class="hold-transition sidebar-mini layout-fixed">
 <div class="wrapper">
 
+  <!-- Preloader -->
+  <div class="preloader">
+    <img src="dist/img/AdminLTELogo.png" alt="AdminLTELogo" height="60" width="60">
+  </div>
+
   <!-- Navbar -->
   <nav class="main-header navbar navbar-expand navbar-white navbar-light">
     <!-- Left navbar links -->