root
/
Pear-Admin-Layui
mirror of https://gitee.com/zhang_1334717033/Pear-Admin-Layui
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

主页加载动画

develop
Jmysy 2020-06-05 22:46:28 +08:00
parent bd344f4294
commit 3f15707a83
3 changed files with 110 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
Pear Admin v 2.0/admin/css/pearLoad.css
View File

@ -1,74 +1,113 @@
.preloader { .loader-main{
position: fixed; position: fixed;
top: 0; width: 100%;
left: 0; height: 100%;
width: 100%; background-color: whitesmoke;
height: 100%; z-index: 9999999;
background-color: #5FB878; margin-top: -60px;
z-index: 999999;
} }
.preloader .preloader-inner {
display: block; .loader {
position: relative; width: 50px;
left: 50%; height: 50px;
top: 50%; margin: 30px auto 40px;
width: 150px; margin-top: 20%;
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;
position: relative; position: relative;
left: 50%; z-index: 999999;
top: 50%; background-color: whitesmoke;
margin-top: 30px;
margin-left: -45px;
font-weight: 500;
font-size: 18px;
color: white;
} }
.preloader .preloader-inner:before { .loader:before {
content: ""; content: "";
position: absolute; width: 50px;
top: 5px; height: 7px;
left: 5px; border-radius: 50%;
right: 5px; background: #000;
bottom: 5px; opacity: 0.1;
border-radius: 50%; position: absolute;
border: 3px solid transparent; top: 59px;
border-top-color: white; left: 0;
animation: spin 3s linear infinite; animation: shadow .5s 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;
} }
.preloader .preloader-message { .loader:after {
display: block; content: "";
position: relative; width: 50px;
left: 50%; height: 50px;
top: 50%; border-radius: 3px;
background-color: #5FB878;
position: absolute;
top: 0;
left: 0;
animation: loading .5s linear infinite;
} }
@keyframes spin { @-webkit-keyframes loading {
0% { 17% {
transform: rotate(0deg); 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);
}
} }

2
Pear Admin v 2.0/component/layui/lay/extends/pearAdmin.js
View File

@ -127,7 +127,7 @@ layui.define(['table', 'jquery', 'element', 'form', 'pearTab', 'pearMenu', 'pear
setTimeout(function() { setTimeout(function() {
$(".preloader").fadeOut(option.done); $(".loader-main").fadeOut(option.done);
// 设 置 关 闭 时 间 // 设 置 关 闭 时 间
}, option.keepLoad) }, option.keepLoad)

13
Pear Admin v 2.0/index.html
View File

@ -24,9 +24,8 @@
</ul> </ul>
<div id="control" class="layui-layout-control"></div> <div id="control" class="layui-layout-control"></div>
<ul class="layui-nav layui-layout-right"> <ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide-xs"><a href="http://www.pearadmin.cn" class="layui-icon layui-icon-home"></a></li>
<li class="layui-nav-item layui-hide-xs"><a href="#" class="fullScreen layui-icon layui-icon-screen-full"></a></li> <li class="layui-nav-item layui-hide-xs"><a href="#" class="fullScreen layui-icon layui-icon-screen-full"></a></li>
<li class="layui-nav-item layui-hide-xs"><a href="https://gitee.com/Jmysy/Pear-Admin-Layui" class="layui-icon layui-icon-website"></a></li> <li class="layui-nav-item layui-hide-xs"><a href="http://www.pearadmin.cn" class="layui-icon layui-icon-website"></a></li>
<li class="layui-nav-item layui-hide-xs" id="headerNotice"></li> <li class="layui-nav-item layui-hide-xs" id="headerNotice"></li>
<li class="layui-nav-item" lay-unselect=""> <li class="layui-nav-item" lay-unselect="">
<a href="javascript:;"><img src="admin/images/avatar.jpg" class="layui-nav-img">就眠仪式</a> <a href="javascript:;"><img src="admin/images/avatar.jpg" class="layui-nav-img">就眠仪式</a>
@ -58,9 +57,12 @@
<div class="pear-cover"></div> <div class="pear-cover"></div>
<!-- 初始加载 动画--> <!-- 初始加载 动画-->
<div class="preloader"> <div class="loader-main">
<div class="preloader-inner"></div> <div class="loader"></div>
</div> </div>
<!-- <div class="loader"></div> -->
<!-- 移动端 的 收缩适配 --> <!-- 移动端 的 收缩适配 -->
<div class="collaspe pe-collaspe layui-hide-sm"> <div class="collaspe pe-collaspe layui-hide-sm">
@ -77,7 +79,7 @@
var layer = layui.layer; var layer = layui.layer;
var config = { var config = {
keepLoad: 1200, // 主 页 加 载 过 度 时 长 可为 false keepLoad: 2000, // 主 页 加 载 过 度 时 长 可为 false
muiltTab: true, // 是 否 开 启 多 标 签 页 true 开启 false 关闭 muiltTab: true, // 是 否 开 启 多 标 签 页 true 开启 false 关闭
control: false, // 是 否 开 启 多 系 统 菜 单 true 开启 false 关闭 control: false, // 是 否 开 启 多 系 统 菜 单 true 开启 false 关闭
theme: "dark-theme", // 默 认 主 题 样 式 dark-theme 默认主题 light-theme 亮主题 theme: "dark-theme", // 默 认 主 题 样 式 dark-theme 默认主题 light-theme 亮主题
@ -95,7 +97,6 @@
} }
pearAdmin.render(config); pearAdmin.render(config);
pearNotice.render(option); pearNotice.render(option);
}) })