From 8210175d54dc72785b3c5fd00dfc15fac1493cdd Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Wed, 26 Jun 2019 21:40:01 +0800
Subject: [PATCH] add: ver 1.6 new loading animate.

---
 header.php                 |   3 +-
 src/{ => img}/img-lazy.gif | Bin
 src/main.css               |  75 ++++++++++++++++++++++++++++++++++++-
 3 files changed, 75 insertions(+), 3 deletions(-)
 rename src/{ => img}/img-lazy.gif (100%)

diff --git a/header.php b/header.php
index 9cb84f1..4cf5ec5 100755
--- a/header.php
+++ b/header.php
@@ -57,7 +57,8 @@
     <toggle></toggle>
     <div id="loading">
 <!--      <div class="loading-circle"></div>-->
-      <img src="<?php $this->options->themeUrl('src/img/loading.gif') ?>" id="loading-img"/>
+<!--      <img src="--><?php //$this->options->themeUrl('src/img/loading.gif') ?><!--" id="loading-img"/>-->
+      <div class="box"></div>
     </div>
     <nav>
         <a href="<?php $this->options->siteUrl(); ?>">
diff --git a/src/img-lazy.gif b/src/img/img-lazy.gif
similarity index 100%
rename from src/img-lazy.gif
rename to src/img/img-lazy.gif
diff --git a/src/main.css b/src/main.css
index 42d308c..1b61f2c 100755
--- a/src/main.css
+++ b/src/main.css
@@ -602,8 +602,8 @@ article:not(.comment-list) li::before, .torTree li::before {
     right: 0;
     bottom: 0;
     margin: auto;
-    height: 30rem;
-    width: 30rem;
+    height: 5rem;
+    width: 5rem;
     transition: opacity .5s;
 }
 
@@ -628,6 +628,77 @@ body.loading #loading {
     animation: loading infinite 1s both linear;
 }
 
+/* - 样式二 */
+#loading .box {
+    top: -4rem;
+    left: -2rem;
+    position: absolute;
+}
+#loading .box:before {
+    content: "";
+    position: absolute;
+    z-index: 2;
+    top: 60px;
+    left: 50px;
+    width: 50px;
+    height: 50px;
+    background: #e74c3c;
+    border-radius: 2px;
+    transform: rotate(45deg);
+    animation: box 0.8s infinite;
+}
+
+#loading .box:after {
+    content: "";
+    position: absolute;
+    z-index: 1;
+    top: 128px;
+    left: 52px;
+    width: 44px;
+    height: 3px;
+    background: #eaeaea;
+    border-radius: 100%;
+    animation: shadow 0.8s infinite;
+}
+@keyframes shadow {
+    0%,
+    100% {
+        left: 54px;
+        width: 40px;
+        background: #eaeaea;
+    }
+    50% {
+        top: 126px;
+        left: 50px; /*让阴影保持在原位*/
+        width: 50px;
+        height: 7px;
+        background: #eee;
+    }
+}
+@keyframes box {
+    0% {
+        top: 50px;
+        transform: rotate(90deg);
+    }
+    20% {
+        border-radius: .5rem;
+
+    }
+    50% {
+        top: 80px;
+        transform: rotate(45deg);
+        border-bottom-right-radius: 25px;
+        background-color: #e67e22
+    }
+    80% {
+        border-radius: 2px;
+    }
+    100% {
+        top: 50px;
+        transform: rotate(0deg);
+    }
+}
+
 #loading img {
     transform: translateY(50%);
 }