Top Line Lase Scroll progress Indicator

You want a tiny scroll indicator line on top of the browser window like some of the news outlets have? Add this CSS to your Child Themes style.css

/*SCROLL INDICATOR*/
.scroll-watcher {
	height: 10px;
	position: fixed;
	top: 0;
	left:0;
	z-index: 1000;
	background-color: var(--wpex-accent, red);
	width: 100%;
	scale: 0 1;
	transform-origin: left;
	animation: scroll-watcher linear;
	animation-timeline: scroll(y);
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;

}
@keyframes scroll-watcher {
	to {
		scale: 1 1;
	}
}

And then just add this PHP to you functions.php

add_action( 'wpex_hook_outer_wrap_before', function() {
	echo '<div class="scroll-watcher"></div>';
} );