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

Preloader Added

Browse source
This commit is contained in:
Daniel 2021-01-05 07:04:04 +05:30
parent 469faf3ed5
commit 6fb29e917a
4 changed files with 28 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) {

14
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;

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

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">
</div>
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->