<header>
	<h1>Scroll Indicator</h1>
</header>

<main>
	<h2>Try scrolling down the page</h2>
	<p>Idea <a href="https://codepen.io/MadeByMike/pen/ZOrEmr">by Mike</a>.</p>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum, deserunt qui! Minima culpa possimus, nostrum consequatur in suscipit incidunt quas dolore qui ex deleniti nisi, voluptas exercitationem at officia tempora!</p>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi consequatur similique nostrum accusantium sapiente iste tempore dolorum. Sunt aliquam magni, amet necessitatibus nam, eveniet odit praesentium, deleniti veniam a perspiciatis.</p>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et odit ea nesciunt architecto mollitia debitis laboriosam, magni laudantium cumque laborum obcaecati, explicabo voluptate deleniti nihil? Magni nisi facere expedita asperiores!</p>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse earum repellendus veritatis necessitatibus corrupti, debitis corporis saepe ad possimus odit quidem, sapiente recusandae odio fuga incidunt aspernatur perspiciatis similique itaque.</p>
	<h2>Hic ex eaque esse in.</h2>
	<p>Voluptatibus perferendis veritatis hic voluptas architecto culpa dignissimos ut a iste possimus asperiores delectus recusandae cumque voluptate aperiam cupiditate quasi, nemo facere est deserunt ipsum necessitatibus temporibus ab molestias. Vitae!</p>
	<p>Obcaecati quo voluptate laborum itaque ipsam, aliquid, nihil quisquam, tempora iusto veniam rem. Impedit soluta ducimus odio error asperiores laborum sapiente numquam atque voluptatem, delectus tempora ex ratione amet obcaecati.</p>
	<p>Porro possimus minus provident! Et in blanditiis necessitatibus ducimus itaque vitae, quo quos suscipit delectus minus sit neque, assumenda eius impedit totam autem porro recusandae aperiam. Minima non corrupti maxime.</p>
	<p>Veniam debitis unde cumque quibusdam, maiores, eaque quia labore nihil deleniti a quidem consequuntur excepturi facilis, explicabo at neque ea tempore aspernatur asperiores. Adipisci, culpa ducimus autem rerum saepe maxime.</p>
	<h2>Sunt, dolore! Voluptas, ab dolorum.</h2>
	<p>Mollitia, vitae unde? Dolores aut modi neque facilis soluta sint iure unde! Omnis officia facere molestiae perspiciatis sequi cumque qui mollitia eaque iure magni, fugit veniam reiciendis cum soluta eius.</p>
	<p>Culpa nihil voluptatum natus dicta dolorum quis, ex delectus sed officiis accusamus adipisci. Similique molestias excepturi quod, mollitia repellat nihil numquam quidem omnis nam consectetur animi recusandae, esse harum voluptatum?</p>
	<p>Numquam consequatur amet sint odio, ad veritatis? Quia recusandae odit laudantium, porro minus delectus, maiores corrupti praesentium tempore officia optio culpa aspernatur accusamus incidunt assumenda. Reiciendis accusamus nobis sunt non?</p>
	<p>Iure, repudiandae itaque? Excepturi incidunt, dicta, accusantium beatae exercitationem eos in, consequatur quibusdam cumque omnis neque animi dolorum. Velit alias sequi perferendis dolore obcaecati non impedit nemo amet voluptatibus saepe?</p>
	<h2>Explicabo, aut voluptates! Suscipit, ipsam!</h2>
	<p>Cumque distinctio temporibus nostrum, exercitationem libero consectetur eligendi expedita quasi veritatis quis dicta maxime soluta provident, excepturi eum unde earum repellendus? Repudiandae voluptatem est, enim dignissimos facere iste officia libero!</p>
	<p>Ut recusandae accusamus voluptatem ea, tempora aut dolorem enim, ex dolore odit modi at voluptatibus aliquam quod ipsam fuga et iste similique mollitia! Doloribus tenetur sequi nam modi consectetur culpa.</p>
	<p>Hic blanditiis aspernatur assumenda, modi repellat dicta, officiis error fuga est magnam dolore repudiandae laboriosam pariatur odit. Vitae inventore fugit accusantium minima, quo neque aliquam ipsum! Temporibus fugiat culpa nam.</p>
	<p>Harum odio ipsa aliquam, quisquam voluptatum, exercitationem laboriosam consectetur voluptas unde, expedita alias fugiat dolorem similique enim et dignissimos perspiciatis. Sapiente, blanditiis beatae animi eos ad ullam dolorem expedita. Quae.</p>
	<h2>Pariatur illo atque placeat iste.</h2>
	<p>Natus animi totam est dolore eum officiis eius maiores exercitationem excepturi unde sint expedita eos esse a sit ea itaque, similique, impedit dicta, aperiam odio in. Aspernatur optio commodi blanditiis!</p>
	<p>Autem provident maiores aperiam dicta placeat dolores doloribus similique minima non odit quia harum nobis, ut fuga molestiae temporibus rerum. Impedit nesciunt veritatis reprehenderit fuga iure facilis tenetur, odio veniam.</p>
	<p>Suscipit fuga porro aspernatur fugit numquam itaque ullam, illo nihil earum quae odio facilis commodi laboriosam magnam, dolor similique labore sunt? Nam sunt reprehenderit ab aliquid perspiciatis, unde minima soluta!</p>
	<p>Dignissimos suscipit doloribus incidunt ipsa veritatis optio? Accusantium, aliquid et quam harum nemo nesciunt doloribus! Suscipit eum expedita aliquid itaque. Et maiores, architecto tempore impedit perferendis culpa est mollitia delectus?</p>
</main>

html {
	--header-size: 125px;
	--scrollbar-height: 3px;
	--scrollbar-bg: #ddd;
	--scrollbar-progress-color: #0089f2;
}

header {
	position: fixed;
	top: 0;
	height: var(--header-size);
	width: 100%;
	background: white;
	padding: 1rem 2rem;
}

main {
	margin-top: calc(var(--header-size) + var(--scrollbar-height));
	padding: 2rem;
}

body {
	background: linear-gradient(
		to right top,
		var(--scrollbar-progress-color) 50%,
		var(--scrollbar-bg) 50%
	);
	background-size: 100%
		calc(100% - 100vh + var(--header-size) + var(--scrollbar-height) + 1px);
	background-repeat: no-repeat;
	margin: 0;
	font-family: "Open Sans", sans-serif;
}
body::before {
	content: "";
	position: fixed;
	top: calc(var(--header-size) + var(--scrollbar-height));
	bottom: 0;
	width: 100%;
	z-index: -1;
	background: white;
}

* {
	box-sizing: border-box;
}