add: loading

data/navs.json

@@ -7,6 +7,12 @@
     "spread": true,
     "isCheck": true
   },
+  {
+    "title": "测试",
+    "href": "pages/help/test.html",
+    "fontFamily": "ok-icon",
+    "icon": ""
+  },
   {
     "title": "控制台示例",
     "href": "",

lib/layui/css/okmodules/okLoading.css

@@ -0,0 +1,316 @@
+#okLoadering {
+    background: #fbfbfb;
+    color:#333333;
+    font-size:100%;
+    margin:0;
+    padding:0;
+    position: fixed;
+    top:0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 999;
+}
+.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
+}
+.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
+}
+.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)
+}
+.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)
+}
+.circlesup {
+    position:absolute;
+    top:-4.7em;
+    right:12.1em
+}
+.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)
+}
+.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
+}
+.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 {
+    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
+    }
+    50% {
+        -moz-transform:scale(1, 1);
+        -moz-animation-timing-function:ease-out
+    }
+    60% {
+        -moz-transform:scale(1, 1);
+        -moz-animation-timing-function:ease-out
+    }
+    100% {
+        -moz-transform:scale(.2, .2)
+    }
+}
+@-o-keyframes text {
+    0% {
+        -o-transform:scale(.2, .2);
+        -o-animation-timing-function:ease-out
+    }
+    50% {
+        -o-transform:scale(1, 1);
+        -o-animation-timing-function:ease-out
+    }
+    60% {
+        -o-transform:scale(1, 1);
+        -o-animation-timing-function:ease-out
+    }
+    100% {
+        -o-transform:scale(.2, .2)
+    }
+}
+@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)
+    }
+}
+

lib/layui/lay/okmodules/okLoading.js

@@ -0,0 +1,83 @@
+"use strict";
+layui.define(["jquery"], function (exprots) {
+	function loadCsstFile(filePath) {
+		var link = document.createElement("link");
+		link.type = "text/css";
+		link.rel = "stylesheet";
+		link.href = filePath || "/lib/layui/css/okmodules/okLoading.css";
+		document.head.appendChild(link);
+	}
+	loadCsstFile();
+
+	var $ = layui.jquery;
+
+	function templateFun(options) {
+		return `<div id="okLoadering">
+	    <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>`
+	}
+
+	function headerInit(content, options) {
+		options = options || {};
+		if (typeof content == "string") {
+			options["content"] = content || "ok-admin...";
+		} else if (typeof content == "object") {
+			options = content;
+		}
+		options.time = options.time || 2000;
+		options.content = options.content || "ok-admin...";
+		return options;
+	}
+
+	var okLoading = function (content, options) {
+		var html = $(template);
+		var options = headerInit(content, options);
+		var template = templateFun(options);
+
+		$("body").append(template);
+
+		$('#okLoadering').delay(options.time).animate({
+			opacity: 0
+		}, 1000, "linear", function () {
+			$("#okLoadering").remove();
+		});
+		/*$('#okLoadering').delay(options.time).hide(1000,"linear",function () {
+			console.log("执行完成");
+		});*/
+	};
+	exprots("okLoading", okLoading);
+});

lib/layui/layui.js

@@ -42,6 +42,7 @@ if (!Object.assign) {
         "okBarcode": "okmodules/okBarcode",
         "okNprogress": "okmodules/okNprogress",
 		    "okSweetAlert2": "okmodules/okSweetAlert2",
+		    "okLoading": "okmodules/okLoading",
     };
     var modulePath = Object.assign({
         layer: "modules/layer",

pages/help/test.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Title</title>
+<!--	<link rel="stylesheet" href="../../lib/layui/css/okmodules/okLoading.css"/>-->
+</head>
+<body>
+dsafasdf
+	<!--<div id="okLoadering">
+		<div class="loader">
+			<div class="text">ok-admin...</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>-->
+</body>
+</html>
+<script src="../../lib/layui/layui.js"></script>
+<script type="text/javascript">
+	layui.use(["okLoading"], function () {
+		let okLoading = layui.okLoading;
+		okLoading();
+	});
+</script>