From 2e91668be1a3f5da8dc39151d72c1c26fb5c3434 Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Wed, 6 Jan 2021 23:31:00 +0800
Subject: [PATCH] feat: pjax loading add animation icon

---
 layout/_partial/progress-bar.ejs             |  9 ++++++-
 layout/_partial/scripts.ejs                  |  2 +-
 source/css/layout/_partial/progress-bar.styl | 26 +++++++++++++++++++-
 source/js/utils.js                           |  9 ++++---
 4 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/layout/_partial/progress-bar.ejs b/layout/_partial/progress-bar.ejs
index 7bf694e..60da5cf 100644
--- a/layout/_partial/progress-bar.ejs
+++ b/layout/_partial/progress-bar.ejs
@@ -1,4 +1,11 @@
 <div class="progress-bar-container">
     <span class="scroll-progress-bar"></span>
-    <span class="loading-progress-bar"></span>
+
+    <% if (theme.pjax.enable === true) { %>
+        <span class="loading-progress-bar"></span>
+        <span class="loading-progress-circle">
+        <i class="fas fa-circle-notch fa-spin"></i>
+    </span>
+    <% } %>
 </div>
+
diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs
index f519a39..3306667 100644
--- a/layout/_partial/scripts.ejs
+++ b/layout/_partial/scripts.ejs
@@ -14,7 +14,7 @@
     <%- __js('js/code-copy.js') %>
 <% } %>
 
-<div class="post-scripts <%= theme.pjax.enable === true ? 'pjax' : '' %>">
+<div class="post-scripts<%= theme.pjax.enable === true ? ' pjax' : '' %>">
     <% if (theme.toc.enable && is_post()) { %>
         <%- __js([
             'js/left-side-toggle.js',
diff --git a/source/css/layout/_partial/progress-bar.styl b/source/css/layout/_partial/progress-bar.styl
index 065d10a..c0b90dc 100644
--- a/source/css/layout/_partial/progress-bar.styl
+++ b/source/css/layout/_partial/progress-bar.styl
@@ -12,7 +12,7 @@
     height: 1px;
     width: 0;
     background: var(--loading-progress-bar-color);
-    box-shadow: 0 1px 3px var(--loading-progress-bar-color);
+    box-shadow: 0 1px 2px var(--loading-progress-bar-color);
     visibility: hidden;
     opacity: 0;
     z-index: $z-index-8;
@@ -26,6 +26,30 @@
   }
 
 
+  .loading-progress-circle {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: $z-index-8;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 8px 0 0;
+    color: var(--default-text-color);
+    visibility: hidden;
+    transition();
+
+    &.show {
+      transition: visibility 0.1s linear;
+      visibility: visible;
+    }
+
+    i {
+      font-size: 1.12rem;
+    }
+  }
+
+
   .scroll-progress-bar {
     position: absolute;
     top: 0;
diff --git a/source/js/utils.js b/source/js/utils.js
index dda0621..353d75f 100644
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -8,6 +8,7 @@ KEEP.initUtils = () => {
     firstScreen_dom: document.querySelector('.first-screen-container'),
     scrollProgressBar_dom: document.querySelector('.scroll-progress-bar'),
     loadingProgressBar_dom: document.querySelector('.loading-progress-bar'),
+    loadingProgressCircle_dom: document.querySelector('.loading-progress-circle'),
 
     innerHeight: window.innerHeight,
     loadingProgressBarTimer: null,
@@ -252,15 +253,16 @@ KEEP.initUtils = () => {
       this.loadingProgressBarTimer && clearInterval(this.loadingProgressBarTimer);
       this.loadingProgressBar_dom.style.width = '0';
       this.scrollProgressBar_dom.classList.add('hide');
+      this.loadingProgressCircle_dom.classList.add('show');
 
-      let width = 20;
-      const maxWidth = 95;
+      let width = 5;
+      const maxWidth = 99;
 
       this.loadingProgressBar_dom.classList.add('show');
       this.loadingProgressBar_dom.style.width = width + '%';
 
       this.loadingProgressBarTimer = setInterval(() => {
-        width += parseInt((Math.random() * 10).toFixed(2));
+        width += 5;
         if (width > maxWidth) width = maxWidth;
         this.loadingProgressBar_dom.style.width = width + '%';
       }, 100);
@@ -273,6 +275,7 @@ KEEP.initUtils = () => {
 
       const tempTimeout = setTimeout(() => {
         this.loadingProgressBar_dom.classList.remove('show');
+        this.loadingProgressCircle_dom.classList.remove('show');
         this.scrollProgressBar_dom.classList.remove('hide');
         clearTimeout(tempTimeout);
       }, 200);