Merge pull request #3365 from danny007in/preload-improve

Preload improve
pull/3372/head
REJack 2021-01-27 21:11:43 +01:00 committed by GitHub
commit 0194fd468f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 184 additions and 76 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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