Fandom Developers Wiki
Advertisement

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.

Configuration

You can customize the progress bar by using the following CSS snippet:

:root {
  --progress-bar-border-radius: (border-value-here);
  --progress-bar-color: (color-value-here);
  --progress-bar-height: (height-value-here);
}

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.

Installation

Text above can be found here (edit)
Advertisement