<body>
	<div id="scroll-percentage" data-scrollPercentage><div class="percentage">&nbsp;</div></div>
	<div id="percentage-value"></div>
	<div class="instruction">v SCROLL DOWN v</div>
	 <div style="height: 5000px;">
	 	<!-- lorem10000 -->
	 </div>
</body>
body {
			margin: 0;
			padding: 0;
			overflow-x: hidden;
			background: linear-gradient(36deg, #888, #222);
		}
		#scroll-percentage {
		    position: fixed;
		    top: 0;
		    width: 100vw;
		    color: #000;
		    margin: 0;
		    padding: 0;
		}

		[data-scrollPercentage] .percentage {
			display: inline-block;
			background-color: orange;
			height: 4px;
      width: 0;
		}
		#percentage-value {
			position: fixed;
			top: 15%;
			left: 50%;
			transform: translateX(-50%);
			height: 300px;
			width: 300px;
			color: orange;
			background-color: #000;
			text-align: center;
			line-height: 300px;
			border-radius: 50%;
			box-shadow: 1px 1px 8px 2px orange, -1px -1px 8px 2px orange; 
			font-size: 3em;
			z-index: 1;
		}
		@keyframes bounce {
			from, 20%, 53%, 80%, to {
				animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				transform: translate3d(0,0,0);
			}

			40%, 43% {
				animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
				transform: translate3d(0, -30px, 0);
			}

			70% {
				animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
				transform: translate3d(0, -15px, 0);
			}

			90% {
				transform: translate3d(0,-4px,0);
			}
		}
		.instruction {
			position: fixed;
      z-index: 2;
			top: 60%;
			width: 100%;
			text-align: center;
			color: darkorange;
			animation: bounce 1s infinite;
		}
const updateScrollPercentage = function() { 
			const heightOfWindow = window.innerHeight,
				contentScrolled = window.pageYOffset,
				bodyHeight = document.body.offsetHeight,
				percentage = document.querySelector("[data-scrollPercentage] .percentage")
				percentageVal = document.querySelector("#percentage-value")

			if(bodyHeight - contentScrolled <= heightOfWindow) {
				percentageVal.textContent = percentage.style.width = "100%"
			}
			else {
				const total = bodyHeight - heightOfWindow,
					got = contentScrolled,
					percent = parseInt((got/total) * 100)
				percentageVal.textContent = percentage.style.width = percent + "%"
			}
		}

		window.addEventListener('scroll', updateScrollPercentage)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.