From d46df43afed5dd9c35d4c769ab4c588e56a9f30e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BB=91?= <1395348685z@gmail.com>
Date: Tue, 30 Mar 2021 12:53:02 +0800
Subject: [PATCH] New reversed reading progress bar option (#221)

---
 _config.yml                                       |  3 +++
 .../css/_common/components/reading-progress.styl  | 15 +++++++++++++--
 source/js/utils.js                                |  2 +-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/_config.yml b/_config.yml
index 7de8528..8fa4fd2 100644
--- a/_config.yml
+++ b/_config.yml
@@ -377,8 +377,11 @@ back2top:
 # Reading progress bar
 reading_progress:
   enable: false
+  # Available values: left | right
+  startAt: left
   # Available values: top | bottom
   position: top
+  reversed: false
   color: "#37c6c0"
   height: 3px
 
diff --git a/source/css/_common/components/reading-progress.styl b/source/css/_common/components/reading-progress.styl
index 84e0944..11e85e9 100644
--- a/source/css/_common/components/reading-progress.styl
+++ b/source/css/_common/components/reading-progress.styl
@@ -1,11 +1,22 @@
 .reading-progress-bar {
+  --progress: 0;
   background: unquote(hexo-config('reading_progress.color'));
   height: unquote(hexo-config('reading_progress.height'));
-  left: 0;
   position: fixed;
-  width: 0;
   z-index: $zindex-5;
 
+  if (hexo-config('reading_progress.reversed')) {
+    width: calc(100% - var(--progress));
+  } else {
+    width: var(--progress);
+  }
+
+  if (hexo-config('reading_progress.startAt') == 'right') {
+    right: 0;
+  } else {
+    left: 0;
+  }
+
   if (hexo-config('reading_progress.position') == 'bottom') {
     bottom: 0;
   } else {
diff --git a/source/js/utils.js b/source/js/utils.js
index feb30fd..e1ff5c5 100644
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -161,7 +161,7 @@ NexT.utils = {
           backToTop.querySelector('span').innerText = Math.round(scrollPercent) + '%';
         }
         if (readingProgressBar) {
-          readingProgressBar.style.width = scrollPercent.toFixed(2) + '%';
+          readingProgressBar.style.setProperty('--progress', scrollPercent.toFixed(2) + '%');
         }
       }
       if (!Array.isArray(NexT.utils.sections)) return;