From 7d773a262877857a3a0a4de2d2f8643aad60149c Mon Sep 17 00:00:00 2001
From: SSpirits <admin@sspirits.top>
Date: Sun, 17 Feb 2019 20:56:47 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=20loading=20=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Action.php  |   1 +
 Plugin.php  |  37 +++------
 loading.css | 219 +++++++++++-----------------------------------------
 3 files changed, 58 insertions(+), 199 deletions(-)

diff --git a/Action.php b/Action.php
index dfb102e..6079721 100644
--- a/Action.php
+++ b/Action.php
@@ -101,6 +101,7 @@ public function printCollecion()
 </a>
           ";
         }
+        echo '<div style="clear:both"></div>';
     }
 
     private static function curl_get_contents($_url)
diff --git a/Plugin.php b/Plugin.php
index dbd5a1d..0d81649 100644
--- a/Plugin.php
+++ b/Plugin.php
@@ -70,34 +70,17 @@ public static function replace($content, $widget, $lastResult)
     public static function output()
     {
         $cssPath = Helper::options()->pluginUrl . '/BangumiList/loading.css';
-        return '<link rel="stylesheet" type="text/css" href="' . $cssPath . '" />' . '<div id="bangumiList">
-        	<div class="bangumi_loading">
-            <div class="loading-anim">
-                <div class="border out"></div>
-                <div class="border in"></div>
-                <div class="border mid"></div>
-                <div class="circle">
-                    <span class="dot"></span>
-                    <span class="dot"></span>
-                    <span class="dot"></span>
-                    <span class="dot"></span>
-                    <span class="dot"></span>
-                    <span class="dot"></span>
-                    <span class="dot"></span>
-                    <span class="dot"></span>
-                    <span class="dot"></span>
-                    <span class="dot"></span>
-                    <span class="dot"></span>
-                    <span class="dot"></span>
+        return '<link rel="stylesheet" type="text/css" href="' . $cssPath . '" />' .
+            '<div id="bangumiList" class="bangumiList">
+        	    <div>
+                    <div class="bangumi_loading">
+                        <div class="inner one"></div>
+                        <div class="inner two"></div>
+                        <div class="inner three"></div>
+                        </div>
+                    <div class="bangumi_loading_text">追番列表加载中...</div>
                 </div>
-                <div class="bangumi_loading_text">追番列表加载中...</div>
-            </div>
-            </div>
-
-        
-        </div>
-        
-        <div style="clear:both"></div>' . "
+            </div>' . "
 		<script>
 			jQuery.ajax({
 				type: 'GET',
diff --git a/loading.css b/loading.css
index f6fea9a..569506f 100644
--- a/loading.css
+++ b/loading.css
@@ -1,198 +1,73 @@
-@charset "utf-8";
-
-.bangumi_loading{
-	padding:100px 0;
-}
-.bangumi_loading_text{
-	text-align:center;
-	padding:10px 0;
-}
-.loading-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(255, 255, 255, 0);
-  transition: background-color .2s ease-out;
-}
-
-.loading-anim {
-  position: relative;
-  width: 200px;
-  height: 200px;
-  margin: auto;
-  perspective: 800px;
-  transform-style: preserve-3d;
-  transform: translateZ(-100px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) scale(0.5);
-  opacity: 0;
-  transition: all .2s ease-out;
-}
-.loading-anim .circle {
-  width: 100%;
-  height: 100%;
-  animation: spin 5s linear infinite;
-}
-.loading-anim .border {
-  position: absolute;
+.bangumi_loading {
+  width: 150px;
+  height: 150px;
   border-radius: 50%;
-  border: 3px solid #e34981;
-}
-.loading-anim .out {
-  top: 15%;
-  left: 15%;
-  width: 70%;
-  height: 70%;
-  border-left-color: transparent;
-  border-right-color: transparent;
-  animation: spin 2s linear reverse infinite;
-}
-.loading-anim .in {
-  top: 18%;
-  left: 18%;
-  width: 64%;
-  height: 64%;
-  border-top-color: transparent;
-  border-bottom-color: transparent;
-  animation: spin 2s linear infinite;
-}
-.loading-anim .mid {
-  top: 40%;
-  left: 40%;
-  width: 20%;
-  height: 20%;
-  border-left-color: transparent;
-  border-right-color: transparent;
-  animation: spin 1s linear infinite;
-}
-
-.loading-anim {
-  transform: translateZ(0) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1);
-  opacity: 1;
-}
-
-.loading-overlay {
-  background: rgba(255, 255, 255, 0.5);
+  perspective: 800px;
+  margin: 20px auto;
 }
 
-.dot {
+.inner {
   position: absolute;
-  display: block;
-  width: 20px;
-  height: 20px;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
   border-radius: 50%;
-  background-color: #e34981;
-  animation: jitter 5s ease-in-out infinite, fade-in-out 5s linear infinite;
-}
-
-.dot:nth-child(1) {
-  top: 90px;
-  left: 180px;
-  animation-delay: 0s;
-}
-
-.dot:nth-child(2) {
-  top: 135px;
-  left: 168px;
-  animation-delay: 0.41667s;
 }
 
-.dot:nth-child(3) {
-  top: 168px;
-  left: 135px;
-  animation-delay: 0.83333s;
+.inner.one {
+  left: 0%;
+  top: 0%;
+  animation: rotate-one 1s linear infinite;
+  border-bottom: 5px solid 		#FF73B3;
 }
 
-.dot:nth-child(4) {
-  top: 180px;
-  left: 90px;
-  animation-delay: 1.25s;
+.inner.two {
+  right: 0%;
+  top: 0%;
+  animation: rotate-two 1s linear infinite;
+  border-right: 5px solid 		#FF73B3;
 }
 
-.dot:nth-child(5) {
-  top: 168px;
-  left: 45px;
-  animation-delay: 1.66667s;
+.inner.three {
+  right: 0%;
+  bottom: 0%;
+  animation: rotate-three 1s linear infinite;
+  border-top: 5px solid 		#FF73B3;
 }
 
-.dot:nth-child(6) {
-  top: 135px;
-  left: 12px;
-  animation-delay: 2.08333s;
-}
-
-.dot:nth-child(7) {
-  top: 90px;
-  left: 0px;
-  animation-delay: 2.5s;
-}
-
-.dot:nth-child(8) {
-  top: 45px;
-  left: 12px;
-  animation-delay: 2.91667s;
-}
-
-.dot:nth-child(9) {
-  top: 12px;
-  left: 45px;
-  animation-delay: 3.33333s;
-}
-
-.dot:nth-child(10) {
-  top: 0px;
-  left: 90px;
-  animation-delay: 3.75s;
-}
-
-.dot:nth-child(11) {
-  top: 12px;
-  left: 135px;
-  animation-delay: 4.16667s;
-}
-
-.dot:nth-child(12) {
-  top: 45px;
-  left: 168px;
-  animation-delay: 4.58333s;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
+@keyframes rotate-one {
+  0% {
+    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
   }
-  to {
-    transform: rotate(360deg);
+  100% {
+    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
   }
 }
-@keyframes jitter {
+
+@keyframes rotate-two {
   0% {
-    transform: scale(1, 1);
-  }
-  25% {
-    transform: scale(0.7, 0.7);
-  }
-  50% {
-    transform: scale(1, 1);
-  }
-  75% {
-    transform: scale(1.3, 1.3);
+    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
   }
   100% {
-    transform: scale(1, 1);
+    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
   }
 }
-@keyframes fade-in-out {
+
+@keyframes rotate-three {
   0% {
-    opacity: 0.8;
-  }
-  25% {
-    opacity: 0.2;
-  }
-  75% {
-    opacity: 1;
+    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
   }
   100% {
-    opacity: 0.8;
+    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
   }
+}
+
+.bangumiList{
+  margin: 20px 0;
+}
+
+.bangumi_loading_text{
+  text-align:center;
+  font-size: 16px;
+  font-weight: 600;
 }
\ No newline at end of file