feat: add loading progress bar

layout/_partial/pjax/pjax.ejs

@@ -5,21 +5,27 @@
             selectors: [
                 'head title',
                 '.page-container',
-                '.pjax',
+                '.pjax'
             ],
             history: true,
             debug: false,
             cacheBust: false,
             timeout: 0,
-            // analytics: false,
-            // currentUrlFullReload: false,
-            // scrollRestoration: false,
+            analytics: false,
+            currentUrlFullReload: false,
+            scrollRestoration: false,
             // scrollTo: true,
         });
 
-        window.addEventListener('pjax:complete', () => {
-            KEEP.refresh();
+
+        document.addEventListener('pjax:send', () => {
+            KEEP.utils.loadingProgressBarStart();
+        });
+
+        document.addEventListener('pjax:complete', () => {
+            KEEP.utils.loadingProgressBarEnd();
             pjax.executeScripts(document.querySelectorAll('script[data-pjax], .pjax script'));
+            KEEP.refresh();
         });
     });
 </script>

layout/_partial/progress-bar.ejs

@@ -0,0 +1,4 @@
+<div class="progress-bar-container">
+    <span class="scroll-progress-bar"></span>
+    <span class="loading-progress-bar"></span>
+</div>

layout/page.ejs

@@ -1,15 +1,10 @@
-<div class="page-container">
+<%- partial('_partial/progress-bar') %>
+<main class="page-container">
 
     <% if (theme.style.first_screen.enable === true && is_home() && !page.prev) { %>
         <%- partial('_partial/first-screen') %>
     <% } %>
 
-    <header class="page-header">
-        <div class="header-progress"></div>
-    </header>
-
-    <main class="page-main">
-
     <div class="page-main-content">
 
         <div class="page-main-content-top">
@@ -18,7 +13,7 @@
 
         <div class="page-main-content-middle">
 
-                <main class="main-content normal-code-theme">
+            <div class="main-content normal-code-theme">
 
                 <% if (is_home()) { %>
                     <%- partial('home-content') %>
@@ -45,7 +40,7 @@
                     <%- partial('_partial/empty-page') %>
 
                 <% } %>
-                </main>
+            </div>
 
         </div>
 
@@ -53,7 +48,6 @@
             <%- partial('_partial/footer') %>
         </div>
     </div>
-    </main>
 
     <% if (is_post()) { %>
         <div class="sidebar-tools">
@@ -66,19 +60,17 @@
     </div>
 
     <% if (is_post() && theme.toc.enable === true) { %>
-        <!-- page aside -->
         <aside class="page-aside">
             <%- partial('_partial/toc') %>
         </aside>
     <% } %>
 
-    <!-- image viewer -->
     <%- partial('_partial/image-viewer') %>
 
-</div>
-
     <% if (theme.local_search.enable) { %>
         <%- partial('_partial/local-search') %>
     <% } %>
 
+</main>
+
 

source/css/common/variables.styl

@@ -8,7 +8,7 @@
 // ========================================================================================
 $header-height = 76px;                                               // 头部默认高度
 $header-shrink-height = $header-height * 0.72;                       // 头部收缩高度
-$header-progress-height = 2.8px;                                // 头部进度条高度
+$scroll-progress-bar-height = 2px;                                   // 头部进度条高度
 $main-content-width = 80%;                                           // 中间内容区域宽度（PC）
 $main-content-width-tablet = 85%;                                    // 中间内容区域宽度（平板）
 $main-content-width-mobile = 90%;                                    // 中间内容区域宽度（手机）
@@ -75,6 +75,7 @@ $scroll-bar-bg-color = darken($background-color, 10%);
 $link-color = darken($default-text-color, 10%);
 $copyright-info-color = #CC0033;
 $avatar-background-color = #0066CC;
+$loading-progress-bar-color = #990000;
 
 
 // ========================================================================================
@@ -96,7 +97,8 @@ $dark-scroll-bar-color = darken($dark-background-color, 30%);
 $dark-scroll-bar-bg-color = lighten($dark-background-color, 10%);
 $dark-link-color = lighten($dark-default-text-color, 10%);
 $dark-copyright-info-color = darken($copyright-info-color, 20%);
-$dark-avatar-background-color = darken($avatar-background-color, 20%);
+$dark-avatar-background-color = darken($avatar-background-color, 10%);
+$dark-loading-progress-bar-color = lighten($loading-progress-bar-color, 50%);
 
 
 // ========================================================================
@@ -129,6 +131,7 @@ root-color(mode) {
   --link-color: mode == 'light' ? $link-color : $dark-link-color;
   --copyright-info-color: mode == 'light' ? $copyright-info-color : $dark-copyright-info-color;
   --avatar-background-color: mode == 'light' ? $avatar-background-color : $dark-avatar-background-color;
+  --loading-progress-bar-color: mode == 'light' ? $loading-progress-bar-color : $dark-loading-progress-bar-color;
 }
 
 

source/css/layout/_partial/first-screen.styl

@@ -10,14 +10,14 @@ $first-screen-img = $temp-img ? $temp-img:'/images/bg.svg';
   width: 100%;
   overflow: hidden;
   background: url($first-screen-img) center center / cover no-repeat;
-  background-position-y: $header-height - $header-progress-height;
+  background-position-y: $header-height - $scroll-progress-bar-height;
 
   +keep-tablet() {
-    background-position-y: $header-height * 0.9 - $header-progress-height;
+    background-position-y: $header-height * 0.9 - $scroll-progress-bar-height;
   }
 
   +keep-mobile() {
-    background-position-y: $header-height * 0.8 - $header-progress-height;
+    background-position-y: $header-height * 0.8 - $scroll-progress-bar-height;
   }
 
   .content {

source/css/layout/_partial/header.styl

@@ -10,7 +10,7 @@ $menu-bar-line-height = 2.5px;
   align-items: center;
   justify-content: center;
   background: var(--background-color);
-  padding-top: $header-progress-height;
+  padding-top: $scroll-progress-bar-height;
   transition();
 
   hover-style(1.02, 1.02);

source/css/layout/_partial/progress-bar.styl

@@ -0,0 +1,45 @@
+.progress-bar-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: $z-index-9;
+
+  .loading-progress-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 1px;
+    width: 0;
+    background: var(--loading-progress-bar-color);
+    box-shadow: 0 1px 3px var(--loading-progress-bar-color);
+    visibility: hidden;
+    opacity: 0;
+    z-index: $z-index-8;
+    transition();
+
+    &.show {
+      transition();
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+
+  .scroll-progress-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: $scroll-progress-bar-height;
+    visibility: hidden;
+    background: var(--primary-color);
+    transition: all 0.1s ease;
+    z-index: $z-index-7;
+
+    &.hide {
+      transition: none;
+      visibility: hidden;
+    }
+  }
+}

source/css/layout/page.styl

@@ -3,32 +3,12 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
 
 .page-container {
   position: relative;
-  padding-top: $header-progress-height;
-
   transition();
 
   +keep-tablet() {
     padding-left: 0 !important;
   }
 
-
-  .page-header {
-    .header-progress {
-      visibility: hidden;
-      position: fixed;
-      width: 0;
-      height: $header-progress-height;
-      top: 0;
-      left: 0;
-      background: var(--primary-color);
-      transition: all 0.1s ease;
-      z-index: $z-index-7;
-    }
-  }
-
-
-  .page-main {
-
   .page-main-content {
     padding-top: $header-height;
     position: relative;
@@ -131,7 +111,6 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
       width: 100%;
     }
   }
-  }
 
 
   .page-aside {

source/css/style.styl

@@ -6,6 +6,7 @@
 @import "layout/_partial/local-search.styl"
 @import "layout/_partial/toc.styl"
 @import "layout/_partial/comment/comment.styl"
+@import "layout/_partial/progress-bar.styl"
 @import "layout/_partial/header.styl"
 @import "layout/_partial/tools.styl"
 @import "layout/_partial/side-tools.styl"

source/js/utils.js

@@ -4,11 +4,13 @@ KEEP.initUtils = () => {
 
     html_root_dom: document.querySelector('html'),
     pageContainer_dom: document.querySelector('.page-container'),
-    headerProgress_dom: document.querySelector('.header-progress'),
     pageTop_dom: document.querySelector('.page-main-content-top'),
     firstScreen_dom: document.querySelector('.first-screen-container'),
+    scrollProgressBar_dom: document.querySelector('.scroll-progress-bar'),
+    loadingProgressBar_dom: document.querySelector('.loading-progress-bar'),
 
     innerHeight: window.innerHeight,
+    loadingProgressBarTimer: null,
     prevScrollValue: 0,
     defaultFontSize: 0,
 
@@ -31,9 +33,9 @@ KEEP.initUtils = () => {
       const percent = Math.round(scrollTop / (scrollHeight - clientHeight) * 100).toFixed(0);
       const ProgressPercent = (scrollTop / (scrollHeight - clientHeight) * 100).toFixed(3);
 
-      if (this.headerProgress_dom) {
-        this.headerProgress_dom.style.visibility = percent === '0' ? 'hidden' : 'visible';
-        this.headerProgress_dom.style.width = `${ProgressPercent}%`;
+      if (this.scrollProgressBar_dom) {
+        this.scrollProgressBar_dom.style.visibility = percent === '0' ? 'hidden' : 'visible';
+        this.scrollProgressBar_dom.style.width = `${ProgressPercent}%`;
       }
 
       // hide header handle
@@ -125,7 +127,7 @@ KEEP.initUtils = () => {
       });
     },
 
-    // go comment
+    // go comment anchor
     goComment() {
       this.goComment_dom = document.querySelector('.go-comment');
       if (this.goComment_dom) {
@@ -150,12 +152,10 @@ KEEP.initUtils = () => {
     // init page height handle
     initPageHeightHandle() {
       if (this.firstScreen_dom) return;
-
-      const temp_h1 = this.getElementHeight('.header-progress');
-      const temp_h2 = this.getElementHeight('.page-main-content-top');
-      const temp_h3 = this.getElementHeight('.page-main-content-middle');
-      const temp_h4 = this.getElementHeight('.page-main-content-bottom');
-      const allDomHeight = temp_h1 + temp_h2 + temp_h3 + temp_h4;
+      const temp_h1 = this.getElementHeight('.page-main-content-top');
+      const temp_h2 = this.getElementHeight('.page-main-content-middle');
+      const temp_h3 = this.getElementHeight('.page-main-content-bottom');
+      const allDomHeight = temp_h1 + temp_h2 + temp_h3;
       const innerHeight = window.innerHeight;
       const pb_dom = document.querySelector('.page-main-content-bottom');
       if (allDomHeight < innerHeight) {
@@ -245,6 +245,37 @@ KEEP.initUtils = () => {
       post && post.forEach(v => {
         v.innerHTML = this.getHowLongAgo(Date.now() - new Date(v.dataset.date).getTime())
       })
+    },
+
+    // loading progress bar start
+    loadingProgressBarStart() {
+      this.loadingProgressBarTimer && clearInterval(this.loadingProgressBarTimer);
+      this.loadingProgressBar_dom.style.width = '0';
+      this.scrollProgressBar_dom.classList.add('hide');
+
+      let width = 20;
+      const maxWidth = 95;
+
+      this.loadingProgressBar_dom.classList.add('show');
+      this.loadingProgressBar_dom.style.width = width + '%';
+
+      this.loadingProgressBarTimer = setInterval(() => {
+        width += parseInt((Math.random() * 10).toFixed(2));
+        if (width > maxWidth) width = maxWidth;
+        this.loadingProgressBar_dom.style.width = width + '%';
+      }, 100);
+    },
+
+    // loading progress bar end
+    loadingProgressBarEnd() {
+      this.loadingProgressBarTimer && clearInterval(this.loadingProgressBarTimer);
+      this.loadingProgressBar_dom.style.width = '100%';
+
+      const tempTimeout = setTimeout(() => {
+        this.loadingProgressBar_dom.classList.remove('show');
+        this.scrollProgressBar_dom.classList.remove('hide');
+        clearTimeout(tempTimeout);
+      }, 200);
     }
   }