Vertical Progressbar on Scrolling

index.html

<!-- You need to insert the Div-Tag with the ID "progressbar" -->
<div id="progressbar"></div>

<!-- Below here are just some Content you mustn't use -->
<div class="content">
	<h1>Vertical Progress-Bar</h1>
	<p>
		Example on how to add a vertical Progress-Bar that makes progress on Scrolling.<br/>
		Try to Scroll on this site to let the magic happen...
	</p>
</div>

<div class="content footer-content">
	<p>
		You now can see, that the progress bar on top of the page has been spread over the full width.<br/>
		Well done.
	</p>
</div>

script.js

// This little function will act as the jQuery equivalent of "$( document ).ready()"
// If you are already using jQuery, you can use it instead of this "document.ready" function.
// Source: http://youmightnotneedjquery.com/#ready
document.ready = function( callback ) {
	if( document.readyState != 'loading' ) {
		callback();
	}
	else {
		document.addEventListener( 'DOMContentLoaded', callback );
	}
};


(function() {

	document.ready( function() {

		/* We have to know some stuff of the current screen, that we will get over the following variables */
		let progressbar = document.getElementById( "progressbar" );
		if( !!progressbar ) {

			let body = document.getElementsByTagName( "body" )[0];
			let window_height = body.offsetHeight;
			let client_height = document.documentElement.clientHeight;

			/* The following variables are for storing the neccessary scroll-data */
			let last_known_scroll_position = 0;
			let ticking = false;

			/* This Event-Listener will hook onto the Scroll-Event of the Browser */
			window.addEventListener( 'scroll', function( e ) {

				last_known_scroll_position = window.scrollY;
				if( !ticking ) {

					window.requestAnimationFrame( function() {
							
						nowScrolling( last_known_scroll_position );
						ticking = false;

					});
					ticking = true;

				}

			});

			/*
			I use the Client-Height for a accurate percentage of the current screen-state.
			On window-resizing the variable "client_height" would stay the same, if I won't add this Event-Listener
			*/
			window.addEventListener( "resize", refactorScreenHeight );
			var mutationObserver = new MutationObserver( refactorScreenHeight );
			mutationObserver.observe(document.documentElement, {
				attributes: true,
				characterData: true,
				childList: true,
				subtree: true,
				attributeOldValue: true,
				characterDataOldValue: true
			});

			function refactorScreenHeight() {

				client_height = document.documentElement.clientHeight;
				window_height = body.offsetHeight;

			}

			function nowScrolling( last_known_scroll_position ) {

				/* Here you also can add your own functions. The following is an example for the Scroll-Bar */
				let percentage = last_known_scroll_position / ( window_height - client_height ) * 100;
				progressbar.style.right = "calc( 100% - " + Math.round( percentage ) + "% )";

			}

		}

	});

})();


/*

=== CHANGELOG ===

- 2020-05-20 -
Now the document- and client-height will refactored.
As soon as the client will change screen-modes (e.g. landscape to portrait on mobiles), the script will look for this change and set the new height of the document. 
Also, the compability of lazy-loading images is now given.
			
*/

style.css

/* Here's the important part of the Bar */
#progressbar {
	position: fixed;
	height: 8px;
	z-index: 99;
	
	top: 0;
	left: 0;
	right: calc( 100% );
	
	background-color: #F50057;
	
	transition: right .5s linear 0s;
}


/* Some stuff to make the screen look pretty */
html {
	font-family: Arial, sans-serif;
}

body {
	overflow: hidden;
	overflow-y: scroll;
	
	position: relative;
	
	height: 4000px;
	width: 100%;
	margin: 0;
	padding: 30px;
}
body:after {
	content: " ";
	display: block;
	
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 0;
	
	background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="28" height="49" viewBox="0 0 28 49"%3E%3Cg fill-rule="evenodd"%3E%3Cg id="hexagons" fill="%239C92AC" fill-opacity="0.4" fill-rule="nonzero"%3E%3Cpath d="M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}
body:before {
	content: " ";
	display: block;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
	
	background: linear-gradient(180deg, rgba(64,0,23,1) 0%, rgba(245,0,87,1) 100%);
}

.content {
	text-align: center;
	padding: 30px;
	width: calc( 100% - 120px );
	color: #ffffff;
	background-color: rgba( 0, 0, 0, .5 );
}

.footer-content {
	position: absolute;
	bottom: 0;
	width: calc( 100% - 180px );
}

vertical-progressbar-on-scrolling.markdown

Vertical Progressbar on Scrolling

A Pen by Codepalm on CodePen.

License.