diff --git a/Pear Admin v 2.0/admin/css/pearLoad.css b/Pear Admin v 2.0/admin/css/pearLoad.css index 63c2737..91667aa 100644 --- a/Pear Admin v 2.0/admin/css/pearLoad.css +++ b/Pear Admin v 2.0/admin/css/pearLoad.css @@ -1,74 +1,113 @@ -.preloader { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: #5FB878; - z-index: 999999; +.loader-main{ + position: fixed; + width: 100%; + height: 100%; + background-color: whitesmoke; + z-index: 9999999; + margin-top: -60px; } -.preloader .preloader-inner { - display: block; - position: relative; - left: 50%; - top: 50%; - width: 150px; - height: 150px; - margin: -75px 0 0 -75px; - border-radius: 50%; - border: 3px solid transparent; - border-top-color: white; - animation: spin 2s linear infinite; -} -.preloader .preloader-message{ - display: block; + +.loader { + width: 50px; + height: 50px; + margin: 30px auto 40px; + margin-top: 20%; position: relative; - left: 50%; - top: 50%; - margin-top: 30px; - margin-left: -45px; - font-weight: 500; - font-size: 18px; - color: white; + z-index: 999999; + background-color: whitesmoke; } -.preloader .preloader-inner:before { - content: ""; - position: absolute; - top: 5px; - left: 5px; - right: 5px; - bottom: 5px; - border-radius: 50%; - border: 3px solid transparent; - border-top-color: white; - animation: spin 3s linear infinite; -} -.preloader .preloader-inner:after { - content: ""; - position: absolute; - top: 15px; - left: 15px; - right: 15px; - bottom: 15px; - border-radius: 50%; - border: 3px solid transparent; - border-top-color: white; - animation: spin 1.5s linear infinite; +.loader:before { + content: ""; + width: 50px; + height: 7px; + border-radius: 50%; + background: #000; + opacity: 0.1; + position: absolute; + top: 59px; + left: 0; + animation: shadow .5s linear infinite; } -.preloader .preloader-message { - display: block; - position: relative; - left: 50%; - top: 50%; +.loader:after { + content: ""; + width: 50px; + height: 50px; + border-radius: 3px; + background-color: #5FB878; + position: absolute; + top: 0; + left: 0; + animation: loading .5s linear infinite; } -@keyframes spin { - 0% { - transform: rotate(0deg); +@-webkit-keyframes loading { + 17% { + border-bottom-right-radius: 3px; + } + + 25% { + transform: translateY(9px) rotate(22.5deg); + } + + 50% { + transform: translateY(18px) scale(1, 0.9) rotate(45deg); + border-bottom-right-radius: 40px; + } + + 75% { + transform: translateY(9px) rotate(67.5deg); + } + + 100% { + transform: translateY(0) rotate(90deg); + } } -to { - transform: rotate(1turn); + +@keyframes loading { + 17% { + border-bottom-right-radius: 3px; + } + + 25% { + transform: translateY(9px) rotate(22.5deg); + } + + 50% { + transform: translateY(18px) scale(1, 0.9) rotate(45deg); + border-bottom-right-radius: 40px; + } + + 75% { + transform: translateY(9px) rotate(67.5deg); + } + + 100% { + transform: translateY(0) rotate(90deg); + } } + +@-webkit-keyframes shadow { + + 0%, + 100% { + transform: scale(1, 1); + } + + 50% { + transform: scale(1.2, 1); + } +} + +@keyframes shadow { + + 0%, + 100% { + transform: scale(1, 1); + } + + 50% { + transform: scale(1.2, 1); + } } diff --git a/Pear Admin v 2.0/component/layui/lay/extends/pearAdmin.js b/Pear Admin v 2.0/component/layui/lay/extends/pearAdmin.js index 3981078..d81c93d 100644 --- a/Pear Admin v 2.0/component/layui/lay/extends/pearAdmin.js +++ b/Pear Admin v 2.0/component/layui/lay/extends/pearAdmin.js @@ -127,7 +127,7 @@ layui.define(['table', 'jquery', 'element', 'form', 'pearTab', 'pearMenu', 'pear setTimeout(function() { - $(".preloader").fadeOut(option.done); + $(".loader-main").fadeOut(option.done); // 设 置 关 闭 时 间 }, option.keepLoad) diff --git a/Pear Admin v 2.0/index.html b/Pear Admin v 2.0/index.html index e0e6518..327b385 100644 --- a/Pear Admin v 2.0/index.html +++ b/Pear Admin v 2.0/index.html @@ -24,9 +24,8 @@