Reading Progress Bar

This module adds a progress indicator showing how much the page has been scrolled as a thin fixed horizontal bar along the top edge of the browser on the front end.

FAQ

Note: It is recommended to add custom CSS at Manage > Stylesheets in a new/existing stylesheet.

How to change the color of the progress bar?

Add this sample CSS and change all the instances of the hexadecimal color code to your desired color:

progress.reading-progress {
  color: #3182CE;
}

progress.reading-progress::-webkit-progress-value {
	background-color: #3182CE;
}

progress.reading-progress::-moz-progress-bar {
	background-color: #3182CE;
}

.progress-bar {
	background-color: #3182CE;
}

Does this work with sticky header?

Yes.

How to show the progress bar below the sticky header?

Add this following sample CSS and modify as needed:

.admin-bar progress.reading-progress {
	top: 154px; /* 32 (height of admin bar) + 122 (height of sticky header) */
}

progress.reading-progress {
	top: 122px; /* height of sticky header */
}

Note: This works properly only when sticky header’s scroll distance is 0.

How to show the progress bar at the bottom?

To move the location of the progress bar to the very bottom of the webpages, add this following CSS at Manage > Stylesheets in the Oxygen editor:

.admin-bar progress.reading-progress {
  top: auto;
  bottom: 0;
}

Is it possible to load the progress bar conditionally?

Yes. Here is an example of loading it only on all single posts.

Add this in a Code Snippet:

add_action( 'wp_enqueue_scripts', 'ot_load_reading_progress_bar_conditionally', 100 );
/**
 * Remove Reading Progress Bar's HTML and script file from loading everywhere except on single posts.
 */
function ot_load_reading_progress_bar_conditionally() {
	// if we are on a single post, abort.
	if ( is_singular( 'post' ) ) {
		return;
	}

	remove_action( 'ct_before_builder', 'Oxy_Toolbox_ReadingProgressBar::reading_progress_bar_frontend' );

	wp_dequeue_script( 'oxy_toolbox_reading_progress_bar_script' );	
}