修改loading动画锯齿问题

src/main/webapp/WEB-INF/views/normal/erp/user_center.html

@@ -31,7 +31,9 @@
 	<!-- 消息提示框 End -->
 	<!-- Loading Start -->
 	<div id="loading" class="loading">
-		<i></i>
+		<div class="wrap">
+			<div class="outer"></div>
+		</div>
 	</div>
 	<!-- Loading End -->
 

src/main/webapp/WEB-INF/views/normal/user_center.html

@@ -34,7 +34,9 @@
 	<!-- 消息提示框 End -->
 	<!-- Loading Start -->
 	<div id="loading" class="loading">
-		<i></i>
+		<div class="wrap">
+			<div class="outer"></div>
+		</div>
 	</div>
 	<!-- Loading End -->
 	<header>

src/main/webapp/WEB-INF/views/normal/vendor_center.html

@@ -29,7 +29,9 @@
 	<!-- 消息提示框 End -->
 	<!-- Loading Start -->
 	<div id="loading" class="loading">
-		<i></i>
+		<div class="wrap">
+			<div class="outer"></div>
+		</div>
 	</div>
 	<!-- Loading End -->
 

src/main/webapp/resources/css/common.css

@@ -425,6 +425,14 @@ input.ng-invalid.ng-dirty,textarea.ng-invalid.ng-dirty {
     opacity: .3;
 }
 
+@keyframes spin {
+	0%   { transform: rotate(360deg); }
+	100% { transform: rotate(0deg); }
+}
+@-webkit-keyframes spin {
+	0%   { transform: rotate(360deg); }
+	100% { transform: rotate(0deg); }
+}
 /*loading new by suntg*/
 .loading {
 	display: none;
@@ -434,6 +442,12 @@ input.ng-invalid.ng-dirty,textarea.ng-invalid.ng-dirty {
 	top: 0;
 	left: 0;
 }
+.loading .wrap {
+	width: 64px; height: 64px; position: absolute;left: 50%;top:50%;margin-left:-32px;margin-top: -32px;
+}
+.loading .wrap .outer {
+	background-repeat: no-repeat;
+	background-size:100%; position: absolute; width: 100%; height: 100%; background-image: url('../img/all/loading.png'); animation: spin 800ms infinite linear;}
 
 .loading.in {
 	display: block;