Add a visible progress bar

_config.yml

@@ -43,6 +43,8 @@ breadcrumbs              : false # true, false (default)
 breadcrumb_home_label : "Home"
 breadcrumb_separator  : ">"
 words_per_minute         : 200
+head_scripts: 
+  - /assets/js/progress.js
 comments:
   provider               : "disqus" # false (default), "disqus", "discourse", "facebook", "google-plus", "staticman", "utterances", "custom"
   disqus:
@@ -380,4 +382,4 @@ titlecase: true
 # Change default template file (in _templates/)
 post_template: post
 page_template: page
-draft_template: draft
+draft_template: draft

_includes/head/custom.html

@@ -0,0 +1 @@
+<div id="progress-bar"></div>

assets/css/main.scss

@@ -71,5 +71,17 @@ $base0f: #926e5c;
   color: $base0c !important;
 }
 
+// Progress Bar
+#progress-bar {
+  background: linear-gradient(to right, red, orange , yellow, green,   
+  blue, indigo, violet var(--scroll), transparent 0);
+  position: fixed;
+  overflow: hidden;
+  width: 100%;
+  height: 3px;
+  z-index: 1;
+}
+
+//@import "progress.css"; // for progress bar
 @import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
 @import "minimal-mistakes"; // main partials

assets/js/progress.js

@@ -0,0 +1,36 @@
+
+document.addEventListener('scroll', _ => {
+    var docElem = document.documentElement;
+    var docBody = document.body;
+    var docScrollTop = (docBody.scrollTop || docElem.scrollTop);
+  
+    readPercent = docScrollTop / (docElem.scrollHeight - docElem.clientHeight) * 100;
+  
+    if (readPercent > 0) {
+      progressBar = document.querySelector('#progress-bar');
+      progressBar.style.setProperty('--scroll', readPercent + '%');
+    } else {
+      progressBar.style.setProperty('--scroll', '0%');
+    }
+  })
+
+  /*
+  document.addEventListener('scroll', _ => {
+  var docElem = document.documentElement;
+  var docBody = document.body;
+  var scrollTop = (docBody.scrollTop || docElem.scrollTop);
+  var height = docElem.scrollHeight - docElem.clientHeight;
+
+  progress = scrollTop / height * 100;
+
+  if (progress > 0) {
+    progressBar = document.querySelector('#progress-bar');
+    var bgVal = '';
+    bgVal = 'linear-gradient(to right, red ' + progress + '%, transparent 0)';
+    progressBar.style.background = bgVal;
+  } else {
+    var bgVal = 'linear-gradient(to right, red 0%, transparent 0)';
+    progressBar.style.background = bgVal;
+  }
+})
+*/