From 4ef9a65cd287f8747546960b2bb9703aa28d9d51 Mon Sep 17 00:00:00 2001
From: xaoxuu <git@xaoxuu.com>
Date: Mon, 24 Oct 2022 00:41:49 +0800
Subject: [PATCH] loading

---
 _config.yml                               |  3 +++
 scripts/tags/about.js                     |  3 +--
 source/css/_common/loading.styl           | 19 ++++++++++++---
 source/css/_layout/sidebar/footer.styl    |  2 +-
 source/css/_layout/tag-plugins/about.styl | 28 +++++++----------------
 source/js/plugins/friends.js              |  5 ++--
 source/js/plugins/sites.js                |  5 ++--
 source/js/plugins/timeline.js             |  5 ++--
 8 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/_config.yml b/_config.yml
index 4b7101b..8001945 100755
--- a/_config.yml
+++ b/_config.yml
@@ -357,6 +357,9 @@ style:
   codeblock:
     scrollbar: 4px
     highlightjs_theme: https://fastly.jsdelivr.net/gh/highlightjs/cdn-release@11.5.0/build/styles/atom-one-dark.min.css
+  loading:
+    loading: 正在加载
+    error: 加载失败，请稍后重试。
 
 default:
   avatar: https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/avatar/round/3442075.svg
diff --git a/scripts/tags/about.js b/scripts/tags/about.js
index 352eac2..c30fbdc 100644
--- a/scripts/tags/about.js
+++ b/scripts/tags/about.js
@@ -18,8 +18,7 @@ hexo.extend.tag.register('about', function(args, content) {
   el += '<div class="tag-plugin about">';
   if (args.back) {
     el += '<a class="nav-back cap" href="' + url_for(hexo.config.root) + '">';
-    el += '<svg aria-hidden="true" viewBox="0 0 16 16" width="1rem" height="1rem" fill="currentColor"><path fill-rule="evenodd" d="M7.78 12.53a.75.75 0 01-1.06 0L2.47 8.28a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L4.81 7h7.44a.75.75 0 010 1.5H4.81l2.97 2.97a.75.75 0 010 1.06z"></path></svg>';
-    el += '<span>Back</span>';
+    el += '<svg aria-hidden="true" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M7.78 12.53a.75.75 0 01-1.06 0L2.47 8.28a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L4.81 7h7.44a.75.75 0 010 1.5H4.81l2.97 2.97a.75.75 0 010 1.06z"></path></svg>';
     el += '</a>';
   }
   // avatar
diff --git a/source/css/_common/loading.styl b/source/css/_common/loading.styl
index 46f1778..f16b050 100644
--- a/source/css/_common/loading.styl
+++ b/source/css/_common/loading.styl
@@ -15,6 +15,19 @@ svg.loading
       transform:rotate(360deg)
 
 .loading-wrap
-  min-height: 50px
-  margin: 2rem 0
-  text-align: center
\ No newline at end of file
+  margin: 0.5rem 0
+  text-align: center
+  background: var(--block)
+  border-radius: $border-card
+  position relative
+  padding: 2rem
+  svg  
+    margin: 4px
+  &:after 
+    content: hexo-config('style.loading.loading')
+    color: var(--text-p1)
+    display: block
+    font-size: 14px
+  &.error
+    &:after
+      content: hexo-config('style.loading.error')
\ No newline at end of file
diff --git a/source/css/_layout/sidebar/footer.styl b/source/css/_layout/sidebar/footer.styl
index 167ddbf..10f6b13 100644
--- a/source/css/_layout/sidebar/footer.styl
+++ b/source/css/_layout/sidebar/footer.styl
@@ -1,5 +1,5 @@
 .l_left .footer
-  margin-top: .5rem
+  margin: 0.5rem var(--gap-l) 0
   @media screen and (max-width: $device-tablet)
     margin-bottom: 1rem
 
diff --git a/source/css/_layout/tag-plugins/about.styl b/source/css/_layout/tag-plugins/about.styl
index 04e370e..0af7111 100644
--- a/source/css/_layout/tag-plugins/about.styl
+++ b/source/css/_layout/tag-plugins/about.styl
@@ -4,30 +4,18 @@
   padding: 2rem
   position: relative
   .nav-back
+    display: none
     position: absolute
     line-height: 1
     overflow: hidden
-    left: 1rem
-    top: 1rem
-    display: flex
+    left: 0.75rem
+    top: 0.75rem
     align-items: center
-    background: var(--site-bg)
-    border-radius: 40px
-    border: 1px solid var(--block-border)
-    padding: 2px 0
-    svg,span
-      trans1 transform
-      width: 36px
-    span
-      position: absolute
-      text-align: center
-      left: 100%
-    &:hover
-      background: var(--card)
-      svg  
-        transform: translateX(-36px)
-      span
-        transform: translateX(-100%)
+    @media screen and (max-width: $device-mobile-max)
+      display: flex
+    svg  
+      width: 1rem
+      height: 1rem
   .about-header
     display flex
     justify-content: center
diff --git a/source/js/plugins/friends.js b/source/js/plugins/friends.js
index 4c0a4a2..72e81f0 100644
--- a/source/js/plugins/friends.js
+++ b/source/js/plugins/friends.js
@@ -44,7 +44,7 @@ const friendsjs = {
   },
   layout: (cfg) => {
     const el = $(cfg.el)[0];
-    $(el).append('<div class="loading-wrap"><svg class="loading" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2709"><path d="M832 512c0-176-144-320-320-320V128c211.2 0 384 172.8 384 384h-64zM192 512c0 176 144 320 320 320v64C300.8 896 128 723.2 128 512h64z" p-id="2710"></path></svg><p></p></div>');
+    $(el).append('<div class="loading-wrap"><svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" stroke-opacity=".3" d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="1.3s" values="60;0"/></path><path stroke-dasharray="15" stroke-dashoffset="15" d="M12 3C16.9706 3 21 7.02944 21 12"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0"/><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g></svg></div>');
     friendsjs.requestAPI(cfg.api, function(data) {
       $(el).find('.loading-wrap').remove();
       const arr = data.content || data;
@@ -60,7 +60,8 @@ const friendsjs = {
       });
     }, function() {
       $(el).find('.loading-wrap svg').remove();
-      $(el).find('.loading-wrap p').text('加载失败，请稍后重试。');
+      $(el).find('.loading-wrap').append('<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" d="M12 3L21 20H3L12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="60;0"/></path><path stroke-dasharray="6" stroke-dashoffset="6" d="M12 10V14"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="6;0"/></path></g><circle cx="12" cy="17" r="1" fill="currentColor" fill-opacity="0"><animate fill="freeze" attributeName="fill-opacity" begin="0.8s" dur="0.4s" values="0;1"/></circle></svg>');
+      $(el).find('.loading-wrap').addClass('error');
     });
   },
 }
diff --git a/source/js/plugins/sites.js b/source/js/plugins/sites.js
index 57091ef..0d3e348 100644
--- a/source/js/plugins/sites.js
+++ b/source/js/plugins/sites.js
@@ -44,7 +44,7 @@ const sitesjs = {
   },
   layout: (cfg) => {
     const el = $(cfg.el)[0];
-    $(el).append('<div class="loading-wrap"><svg class="loading" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2709"><path d="M832 512c0-176-144-320-320-320V128c211.2 0 384 172.8 384 384h-64zM192 512c0 176 144 320 320 320v64C300.8 896 128 723.2 128 512h64z" p-id="2710"></path></svg><p></p></div>');
+    $(el).append('<div class="loading-wrap"><svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" stroke-opacity=".3" d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="1.3s" values="60;0"/></path><path stroke-dasharray="15" stroke-dashoffset="15" d="M12 3C16.9706 3 21 7.02944 21 12"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0"/><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g></svg></div>');
     sitesjs.requestAPI(cfg.api, function(data) {
       $(el).find('.loading-wrap').remove();
       const arr = data.content;
@@ -63,7 +63,8 @@ const sitesjs = {
       });
     }, function() {
       $(el).find('.loading-wrap svg').remove();
-      $(el).find('.loading-wrap p').text('加载失败，请稍后重试。');
+      $(el).find('.loading-wrap').append('<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" d="M12 3L21 20H3L12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="60;0"/></path><path stroke-dasharray="6" stroke-dashoffset="6" d="M12 10V14"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="6;0"/></path></g><circle cx="12" cy="17" r="1" fill="currentColor" fill-opacity="0"><animate fill="freeze" attributeName="fill-opacity" begin="0.8s" dur="0.4s" values="0;1"/></circle></svg>');
+      $(el).find('.loading-wrap').addClass('error');
     });
   },
 }
diff --git a/source/js/plugins/timeline.js b/source/js/plugins/timeline.js
index b9defc8..736b36d 100644
--- a/source/js/plugins/timeline.js
+++ b/source/js/plugins/timeline.js
@@ -54,7 +54,7 @@ const StellarTimeline = {
   },
   layoutDiv: (cfg) => {
     const el = $(cfg.el)[0];
-    $(el).append('<div class="loading-wrap"><svg class="loading" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2709"><path d="M832 512c0-176-144-320-320-320V128c211.2 0 384 172.8 384 384h-64zM192 512c0 176 144 320 320 320v64C300.8 896 128 723.2 128 512h64z" p-id="2710"></path></svg><p></p></div>');
+    $(el).append('<div class="loading-wrap"><svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" stroke-opacity=".3" d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="1.3s" values="60;0"/></path><path stroke-dasharray="15" stroke-dashoffset="15" d="M12 3C16.9706 3 21 7.02944 21 12"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0"/><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g></svg></div>');
     StellarTimeline.requestAPI(cfg.api, function(data) {
       $(el).find('.loading-wrap').remove();
       const arr = data.content || data;
@@ -127,7 +127,8 @@ const StellarTimeline = {
       });
     }, function() {
       $(el).find('.loading-wrap svg').remove();
-      $(el).find('.loading-wrap p').text('加载失败，请稍后重试。');
+      $(el).find('.loading-wrap').append('<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" d="M12 3L21 20H3L12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="60;0"/></path><path stroke-dasharray="6" stroke-dashoffset="6" d="M12 10V14"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="6;0"/></path></g><circle cx="12" cy="17" r="1" fill="currentColor" fill-opacity="0"><animate fill="freeze" attributeName="fill-opacity" begin="0.8s" dur="0.4s" values="0;1"/></circle></svg>');
+      $(el).find('.loading-wrap').addClass('error');
     });
   },
 }