主页加载动画
Jmysy
parent
bd344f4294
commit
3f15707a83
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -24,9 +24,8 @@
|
|||
</ul>
|
||||
<div id="control" class="layui-layout-control"></div>
|
||||
<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="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" lay-unselect="">
|
||||
<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="preloader">
|
||||
<div class="preloader-inner"></div>
|
||||
<div class="loader-main">
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <div class="loader"></div> -->
|
||||
|
||||
<!-- 移动端 的 收缩适配 -->
|
||||
<div class="collaspe pe-collaspe layui-hide-sm">
|
||||
|
|
@ -77,7 +79,7 @@
|
|||
var layer = layui.layer;
|
||||
|
||||
var config = {
|
||||
keepLoad: 1200, // 主 页 加 载 过 度 时 长 可为 false
|
||||
keepLoad: 2000, // 主 页 加 载 过 度 时 长 可为 false
|
||||
muiltTab: true, // 是 否 开 启 多 标 签 页 true 开启 false 关闭
|
||||
control: false, // 是 否 开 启 多 系 统 菜 单 true 开启 false 关闭
|
||||
theme: "dark-theme", // 默 认 主 题 样 式 dark-theme 默认主题 light-theme 亮主题
|
||||
|
|
@ -95,7 +97,6 @@
|
|||
}
|
||||
|
||||
pearAdmin.render(config);
|
||||
|
||||
pearNotice.render(option);
|
||||
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue