up: ok-loading
zhizous
parent
387d18bc69
commit
afb20792a2
|
|
@ -7,7 +7,9 @@
|
|||
<meta name="keywords" content="ok-admin v2.0,ok-admin网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
|
||||
<meta name="description" content="ok-admin v2.0，顾名思义，很赞的后台模版，它是一款基于Layui框架的轻量级扁平化且完全免费开源的网站后台管理系统模板，适合中小型CMS后台系统。">
|
||||
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
|
||||
<link rel="stylesheet" href="./lib/loading/okLoading.css" />
|
||||
<link rel="stylesheet" href="css/okadmin.css">
|
||||
<script type="text/javascript" src="./lib/loading/okLoading.js"></script>
|
||||
</head>
|
||||
<body class="layui-layout-body">
|
||||
<!-- 更换主体 Eg:orange_theme|blue_theme -->
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ layui.use(["okUtils", "table", "okCountUp", "okMock"], function () {
|
|||
var okUtils = layui.okUtils;
|
||||
var okMock = layui.okMock;
|
||||
var $ = layui.jquery;
|
||||
okLoading.close();
|
||||
|
||||
/**
|
||||
* 收入、商品、博客、用户
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer", "okContextMenu", "
|
|||
}
|
||||
});
|
||||
objOkTab = okTab;
|
||||
|
||||
okLoading.close();/**关闭加载动画*/
|
||||
/**
|
||||
* 左侧导航渲染完成之后的操作
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,364 +1,87 @@
|
|||
.ok-loading {
|
||||
background: #fbfbfb;
|
||||
color: #333333;
|
||||
font-size: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
position:absolute;
|
||||
display:block;
|
||||
width:100%;
|
||||
height:100%;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
z-index:19891017;
|
||||
background-color:#fff
|
||||
}
|
||||
.ok-loading.close {
|
||||
animation: close 1s;
|
||||
-webkit-animation: close 1s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
.loader {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-moz-transform: translate(-50%, -50%);
|
||||
-mos-transform: translate(-50%, -50%);
|
||||
-o-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
cursor: default
|
||||
.ball-loader{
|
||||
position:absolute;
|
||||
left:50%;
|
||||
top:50%;
|
||||
transform:translate(-50%, -50%);
|
||||
-ms-transform:translate(-50%, -50%);
|
||||
-webkit-transform:translate(-50%, -50%)
|
||||
}
|
||||
.text {
|
||||
position: absolute;
|
||||
left: -1.3em;
|
||||
top: -1.7em;
|
||||
white-space: nowrap;
|
||||
-webkit-animation: text 2s infinite;
|
||||
-moz-animation: text 2s infinite;
|
||||
-moz-animation: text 2s infinite;
|
||||
-ms-animation: text 2s infinite;
|
||||
-o-animation: text 2s infinite;
|
||||
animation: text 2s infinite
|
||||
.ball-loader>span, .signal-loader>span {
|
||||
background-color:#4aca85;
|
||||
display:inline-block
|
||||
}
|
||||
.vertical {
|
||||
position: absolute;
|
||||
top: -1.84em;
|
||||
left: -.4em;
|
||||
-webkit-transform: rotate(90deg);
|
||||
-moz-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
-o-transform: rotate(90deg);
|
||||
transform: rotate(90deg)
|
||||
.ball-loader>span:nth-child(1), .ball-loader.sm>span:nth-child(1), .signal-loader>span:nth-child(1), .signal-loader.sm>span:nth-child(1) {
|
||||
-webkit-animation-delay:0s;
|
||||
animation-delay:0s
|
||||
}
|
||||
.horizontal {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
transform: rotate(0deg)
|
||||
.ball-loader>span:nth-child(2), .ball-loader.sm>span:nth-child(2), .signal-loader>span:nth-child(2), .signal-loader.sm>span:nth-child(2) {
|
||||
-webkit-animation-delay:.1s;
|
||||
animation-delay:.1s
|
||||
}
|
||||
.circlesup {
|
||||
position: absolute;
|
||||
top: -4.7em;
|
||||
right: 12.1em
|
||||
.ball-loader>span:nth-child(3), .ball-loader.sm>span:nth-child(3), .signal-loader>span:nth-child(3), .signal-loader.sm>span:nth-child(3) {
|
||||
-webkit-animation-delay:.15s;
|
||||
animation-delay:.15s
|
||||
}
|
||||
.circlesdwn {
|
||||
position: absolute;
|
||||
top: 2.5em;
|
||||
right: -13.5em;
|
||||
-webkit-transform: rotate(180deg);
|
||||
-moz-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
-o-transform: rotate(180deg);
|
||||
transform: rotate(180deg)
|
||||
.ball-loader>span:nth-child(4), .ball-loader.sm>span:nth-child(4), .signal-loader>span:nth-child(4), .signal-loader.sm>span:nth-child(4) {
|
||||
-webkit-animation-delay:.2s;
|
||||
animation-delay:.2s
|
||||
}
|
||||
.circle {
|
||||
position: absolute;
|
||||
width: 15em;
|
||||
height: 15em;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
-webkit-animation: orbit 2s infinite;
|
||||
-moz-animation: orbit 2s infinite;
|
||||
-moz-animation: orbit 2s infinite;
|
||||
-ms-animation: orbit 2s infinite;
|
||||
-o-animation: orbit 2s infinite;
|
||||
animation: orbit 2s infinite;
|
||||
z-index: 5
|
||||
.ball-loader>span {
|
||||
width:20px;
|
||||
height:20px;
|
||||
margin:0 3px;
|
||||
border-radius:50%;
|
||||
transform:scale(0);
|
||||
-ms-transform:scale(0);
|
||||
-webkit-transform:scale(0);
|
||||
animation:ball-load 1s ease-in-out infinite;
|
||||
-webkit-animation:1s ball-load ease-in-out infinite
|
||||
}
|
||||
.circle:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
-webkit-border-radius: 100%;
|
||||
-moz-border-radius: 100%;
|
||||
-ms-border-radius: 100%;
|
||||
-o-border-radius: 100%;
|
||||
border-radius: 100%;
|
||||
background: #13a3a5
|
||||
}
|
||||
.circle:nth-child(2) {
|
||||
-webkit-animation-delay: 100ms;
|
||||
-moz-animation-delay: 100ms;
|
||||
-ms-animation-delay: 100ms;
|
||||
-o-animation-delay: 100ms;
|
||||
animation-delay: 100ms;
|
||||
z-index: 4
|
||||
}
|
||||
.circle:nth-child(2):after {
|
||||
background: #56bebf;
|
||||
-webkit-transform: scale(.8, .8);
|
||||
-moz-transform: scale(.8, .8);
|
||||
-ms-transform: scale(.8, .8);
|
||||
-o-transform: scale(.8, .8);
|
||||
transform: scale(.8, .8)
|
||||
}
|
||||
.circle:nth-child(3) {
|
||||
-webkit-animation-delay: 225ms;
|
||||
-moz-animation-delay: 225ms;
|
||||
-ms-animation-delay: 225ms;
|
||||
-o-animation-delay: 225ms;
|
||||
animation-delay: 225ms;
|
||||
z-index: 3
|
||||
}
|
||||
.circle:nth-child(3):after {
|
||||
background: #ffa489;
|
||||
-webkit-transform: scale(.6, .6);
|
||||
-moz-transform: scale(.6, .6);
|
||||
-ms-transform: scale(.6, .6);
|
||||
-o-transform: scale(.6, .6);
|
||||
transform: scale(.6, .6)
|
||||
}
|
||||
.circle:nth-child(4) {
|
||||
-webkit-animation-delay: 350ms;
|
||||
-moz-animation-delay: 350ms;
|
||||
-ms-animation-delay: 350ms;
|
||||
-o-animation-delay: 350ms;
|
||||
animation-delay: 350ms;
|
||||
z-index: 2
|
||||
}
|
||||
.circle:nth-child(4):after {
|
||||
background: #ff6d37;
|
||||
-webkit-transform: scale(.4, .4);
|
||||
-moz-transform: scale(.4, .4);
|
||||
-ms-transform: scale(.4, .4);
|
||||
-o-transform: scale(.4, .4);
|
||||
transform: scale(.4, .4)
|
||||
}
|
||||
.circle:nth-child(5) {
|
||||
-webkit-animation-delay: 475ms;
|
||||
-moz-animation-delay: 475ms;
|
||||
-ms-animation-delay: 475ms;
|
||||
-o-animation-delay: 475ms;
|
||||
animation-delay: 475ms;
|
||||
z-index: 1
|
||||
}
|
||||
.circle:nth-child(5):after {
|
||||
background: #db2f00;
|
||||
-webkit-transform: scale(.2, .2);
|
||||
-moz-transform: scale(.2, .2);
|
||||
-ms-transform: scale(.2, .2);
|
||||
-o-transform: scale(.2, .2);
|
||||
transform: scale(.2, .2)
|
||||
}
|
||||
@-webkit-keyframes orbit {
|
||||
@-webkit-keyframes ball-load {
|
||||
0% {
|
||||
-webkit-transform: rotate(45deg)
|
||||
}
|
||||
5% {
|
||||
-webkit-transform: rotate(45deg);
|
||||
-webkit-animation-timing-function: ease-out
|
||||
}
|
||||
70% {
|
||||
-webkit-transform: rotate(405deg);
|
||||
-webkit-animation-timing-function: ease-in
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(405deg)
|
||||
}
|
||||
}
|
||||
@-moz-keyframes orbit {
|
||||
0% {
|
||||
-moz-transform: rotate(45deg)
|
||||
}
|
||||
5% {
|
||||
-moz-transform: rotate(45deg);
|
||||
-moz-animation-timing-function: ease-out
|
||||
}
|
||||
70% {
|
||||
-moz-transform: rotate(405deg);
|
||||
-moz-animation-timing-function: ease-in
|
||||
}
|
||||
100% {
|
||||
-moz-transform: rotate(405deg)
|
||||
}
|
||||
}
|
||||
@-ms-keyframes orbit {
|
||||
0% {
|
||||
-ms-transform: rotate(45deg)
|
||||
}
|
||||
5% {
|
||||
-ms-transform: rotate(45deg);
|
||||
-ms-animation-timing-function: ease-out
|
||||
}
|
||||
70% {
|
||||
-ms-transform: rotate(405deg);
|
||||
-ms-animation-timing-function: ease-in
|
||||
}
|
||||
100% {
|
||||
-ms-transform: rotate(405deg)
|
||||
}
|
||||
}
|
||||
@-o-keyframes orbit {
|
||||
0% {
|
||||
-o-transform: rotate(45deg)
|
||||
}
|
||||
5% {
|
||||
-o-transform: rotate(45deg);
|
||||
-o-animation-timing-function: ease-out
|
||||
}
|
||||
70% {
|
||||
-o-transform: rotate(405deg);
|
||||
-o-animation-timing-function: ease-in
|
||||
}
|
||||
100% {
|
||||
-o-transform: rotate(405deg)
|
||||
}
|
||||
}
|
||||
@keyframes orbit {
|
||||
0% {
|
||||
transform: rotate(45deg)
|
||||
}
|
||||
5% {
|
||||
transform: rotate(45deg);
|
||||
animation-timing-function: ease-out
|
||||
}
|
||||
70% {
|
||||
transform: rotate(405deg);
|
||||
animation-timing-function: ease-in
|
||||
}
|
||||
100% {
|
||||
transform: rotate(405deg)
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes text {
|
||||
0% {
|
||||
-webkit-transform: scale(.2, .2);
|
||||
-webkit-animation-timing-function: ease-out
|
||||
}
|
||||
40%, 60% {
|
||||
-webkit-transform: scale(1, 1);
|
||||
-webkit-animation-timing-function: ease-out
|
||||
}
|
||||
70%, 100% {
|
||||
-webkit-transform: scale(.2, .2)
|
||||
}
|
||||
}
|
||||
@-moz-keyframes text {
|
||||
0% {
|
||||
-moz-transform: scale(.2, .2);
|
||||
-moz-animation-timing-function: ease-out
|
||||
transform:scale(0);
|
||||
-webkit-transform:scale(0)
|
||||
}
|
||||
50% {
|
||||
-moz-transform: scale(1, 1);
|
||||
-moz-animation-timing-function: ease-out
|
||||
}
|
||||
60% {
|
||||
-moz-transform: scale(1, 1);
|
||||
-moz-animation-timing-function: ease-out
|
||||
transform:scale(1);
|
||||
-webkit-transform:scale(1)
|
||||
}
|
||||
100% {
|
||||
-moz-transform: scale(.2, .2)
|
||||
transform:scale(0);
|
||||
-webkit-transform:scale(0)
|
||||
}
|
||||
}
|
||||
@-o-keyframes text {
|
||||
@keyframes ball-load {
|
||||
0% {
|
||||
-o-transform: scale(.2, .2);
|
||||
-o-animation-timing-function: ease-out
|
||||
transform:scale(0);
|
||||
-webkit-transform:scale(0)
|
||||
}
|
||||
50% {
|
||||
-o-transform: scale(1, 1);
|
||||
-o-animation-timing-function: ease-out
|
||||
}
|
||||
60% {
|
||||
-o-transform: scale(1, 1);
|
||||
-o-animation-timing-function: ease-out
|
||||
transform:scale(1);
|
||||
-webkit-transform:scale(1)
|
||||
}
|
||||
100% {
|
||||
-o-transform: scale(.2, .2)
|
||||
transform:scale(0);
|
||||
-webkit-transform:scale(0)
|
||||
}
|
||||
}
|
||||
@keyframes text {
|
||||
0% {
|
||||
transform: scale(.2, .2);
|
||||
animation-timing-function: ease-out
|
||||
}
|
||||
50% {
|
||||
transform: scale(1, 1);
|
||||
animation-timing-function: ease-out
|
||||
}
|
||||
60% {
|
||||
transform: scale(1, 1);
|
||||
animation-timing-function: ease-out
|
||||
}
|
||||
100% {
|
||||
transform: scale(.2, .2)
|
||||
}
|
||||
}
|
||||
|
||||
/*@keyframes close {
|
||||
0% {
|
||||
opacity: 1;
|
||||
display: block;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@-ms-keyframes close {
|
||||
0% {
|
||||
opacity: 1;
|
||||
display: block;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@-o-keyframes close {
|
||||
0% {
|
||||
opacity: 1;
|
||||
display: block;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes close {
|
||||
0% {
|
||||
opacity: 1;
|
||||
display: block;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
}*/
|
||||
@-webkit-keyframes close {
|
||||
0% {
|
||||
opacity: 1;
|
||||
|
|
@ -368,4 +91,6 @@
|
|||
opacity: 0;
|
||||
/*display: none;*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,44 +3,13 @@ var ok_load_options = {
|
|||
content: "ok-admin..."
|
||||
};
|
||||
!function (content, options) {
|
||||
|
||||
function templateFun(options) {
|
||||
return `<div class="ok-loading">
|
||||
<div class="loader">
|
||||
<div class="text">${options.content}</div>
|
||||
<div class="horizontal">
|
||||
<div class="circlesup">
|
||||
<div class="circle"></div>
|
||||
<div class="circle"></div>
|
||||
<div class="circle"></div>
|
||||
<div class="circle"></div>
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="circlesdwn">
|
||||
<div class="circle"></div>
|
||||
<div class="circle"></div>
|
||||
<div class="circle"></div>
|
||||
<div class="circle"></div>
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vertical">
|
||||
<div class="circlesup">
|
||||
<div class="circle"></div>
|
||||
<div class="circle"></div>
|
||||
<div class="circle"></div>
|
||||
<div class="circle"></div>
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="circlesdwn">
|
||||
<div class="circle"></div>
|
||||
<div class="circle"></div>
|
||||
<div class="circle"></div>
|
||||
<div class="circle"></div>
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
<div class="ball-loader">
|
||||
<span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function headerInit(content, options) {
|
||||
|
|
@ -61,25 +30,17 @@ var ok_load_options = {
|
|||
}();
|
||||
|
||||
var okLoading = {
|
||||
close: function ($, time, dom) {
|
||||
close: function (time, dom) {
|
||||
time = time || ok_load_options.time;
|
||||
dom = dom || document.getElementsByClassName("ok-loading")[0];
|
||||
if ($) {
|
||||
$(dom).delay(time).animate({
|
||||
opacity: 0
|
||||
}, 1000, "linear", function () {
|
||||
$(dom).remove();
|
||||
});
|
||||
} else {
|
||||
var setTime1 = setTimeout(function () {
|
||||
clearTimeout(setTime1);
|
||||
dom.classList.add("close");
|
||||
var setTime2 = setTimeout(function () {
|
||||
clearTimeout(setTime2);
|
||||
dom.parentNode.removeChild(dom);/**删除当前节点*/
|
||||
}, 800);
|
||||
}, time);
|
||||
}
|
||||
var setTime1 = setTimeout(function () {
|
||||
clearTimeout(setTime1);
|
||||
dom.classList.add("close");
|
||||
var setTime2 = setTimeout(function () {
|
||||
clearTimeout(setTime2);
|
||||
dom.parentNode.removeChild(dom);/**删除当前节点*/
|
||||
}, 800);
|
||||
}, time);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@
|
|||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<link rel="stylesheet" href="../css/oksub.css" media="all"/>
|
||||
<script type="text/javascript" src="../lib/loading/okLoading.js"></script>
|
||||
<script type="text/javascript" src="../lib/echarts/echarts.min.js"></script>
|
||||
<script type="text/javascript" src="../lib/echarts/echarts.theme.js"></script>
|
||||
<script type="text/javascript" src="../lib/echarts/world/js/china.js"></script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue