Add a visible progress bar

This commit is contained in:
Robert McGovern 2020-04-18 02:00:26 +01:00
parent bcd67c08eb
commit ef84c03045
4 changed files with 52 additions and 1 deletions

View File

@ -43,6 +43,8 @@ breadcrumbs : false # true, false (default)
breadcrumb_home_label : "Home" breadcrumb_home_label : "Home"
breadcrumb_separator : ">" breadcrumb_separator : ">"
words_per_minute : 200 words_per_minute : 200
head_scripts:
- /assets/js/progress.js
comments: comments:
provider : "disqus" # false (default), "disqus", "discourse", "facebook", "google-plus", "staticman", "utterances", "custom" provider : "disqus" # false (default), "disqus", "discourse", "facebook", "google-plus", "staticman", "utterances", "custom"
disqus: disqus:

View File

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

View File

@ -71,5 +71,17 @@ $base0f: #926e5c;
color: $base0c !important; 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/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
@import "minimal-mistakes"; // main partials @import "minimal-mistakes"; // main partials

36
assets/js/progress.js Normal file
View File

@ -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;
}
})
*/