主页加载动画

Pear Admin v 2.0/admin/css/pearLoad.css

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

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

@@ -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)

Pear Admin v 2.0/index.html

@@ -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,10 +57,13 @@
 		<div class="pear-cover"></div>
 
 		<!-- 初始加载 动画-->
-		<div class="preloader">
+		<div class="loader-main">
-			<div class="preloader-inner"></div>
+		   <div class="loader"></div>	
 		</div>
 	    
+	
+		<!-- <div class="loader"></div> -->
+
 		<!-- 移动端 的 收缩适配 -->
 		<div class="collaspe pe-collaspe layui-hide-sm">
 			<i class="layui-icon layui-icon-shrink-right"></i>
@@ -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);
 
 			})