diff --git a/index.html b/index.html
index 2b99120..46e42b9 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,9 @@
+
+
diff --git a/js/console.js b/js/console.js
index a2c84cb..859b19a 100644
--- a/js/console.js
+++ b/js/console.js
@@ -5,7 +5,7 @@ layui.use(["okUtils", "table", "okCountUp", "okMock"], function () {
var okUtils = layui.okUtils;
var okMock = layui.okMock;
var $ = layui.jquery;
- okLoading.close();
+
/**
* 收入、商品、博客、用户
*/
diff --git a/js/okadmin.js b/js/okadmin.js
index f3ff8ed..a98d6d1 100644
--- a/js/okadmin.js
+++ b/js/okadmin.js
@@ -19,7 +19,7 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer", "okContextMenu", "
}
});
objOkTab = okTab;
-
+ okLoading.close();/**关闭加载动画*/
/**
* 左侧导航渲染完成之后的操作
*/
diff --git a/lib/loading/okLoading.css b/lib/loading/okLoading.css
index 4feb87e..cacd45b 100644
--- a/lib/loading/okLoading.css
+++ b/lib/loading/okLoading.css
@@ -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;*/
}
-}
\ No newline at end of file
+}
+
+
diff --git a/lib/loading/okLoading.js b/lib/loading/okLoading.js
index 3d1d080..7add461 100644
--- a/lib/loading/okLoading.js
+++ b/lib/loading/okLoading.js
@@ -3,44 +3,13 @@ var ok_load_options = {
content: "ok-admin..."
};
!function (content, options) {
+
function templateFun(options) {
return `
-
-
${options.content}
-
-
-
-
+
+
+ `;
}
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);
}
};
diff --git a/pages/console.html b/pages/console.html
index c0ba6e4..99bbf45 100644
--- a/pages/console.html
+++ b/pages/console.html
@@ -12,7 +12,6 @@
-