maxmustermann/AdminLTE
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge pull request #3284 from danny007in/preloader-add

Browse source 
Preloader Added
This commit is contained in:
REJack 2021-01-19 07:57:18 +01:00 committed by GitHub
parent 76de56d35a e932382f1b
commit c104f19a0c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 49 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
build/js/Layout.js
View file

@ -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) {

18
build/scss/_layout.scss
View file

@ -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;
}
}

1
build/scss/_variables.scss
View file

@ -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
// --------------------------------------------------------

17
docs/layout.md vendored
View file

@ -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:

5
index.html
View file

@ -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 -->