ReadProgressBar

ReadProgressBar is a script that adds a progress bar at the top of the screen that increases its width when the user scrolls down through a blog post/article. It serves to accurately show how much the user has progressed through a page.
Once it reaches 100% width (or, in other words, the user has scrolled below the blog/page's article), the bar itself will hide behind the top nav bar.
== ==
You can customize the progress bar by using the following CSS snippet:
You can set the bar's height and border-radius to up to 8px. So if you want, for example, an 6px tall hotpink progress bar with slightly rounded edges, this would be the code you'd use:
:root {
 --progress-bar-border-radius: 4px;
 --progress-bar-color: hotpink;
 --progress-bar-height: 6px;
}
To show the progress bar on articles add window.enableReadProgressBarOnArticles = true to your common.js before importing the script.
== Demo ==
Click the checkbox below to toggle the styles used above.
== ==