September 16, 2022

Creating an Article Progress Bar with Javascript

Justin Golden

TL;DR

Here’s your one line:

scrollPercent = window.scrollY / articleElement.offsetHeight;

Vanilla

CSS

First, let’s create our scroll spy, and attach it to the top of the page:

Either in

Vanilla CSS:

<div class="scrollspy-wrapper">
	<div class="scrollspy-interior"></div>
</div>

.scrollspy-wrapper {
	width: 100%;
	top: 0;
	left: 0;
	position: fixed;
	height: 0.5rem;
	z-index: 10;
}

.scrollspy-interior {
	height: 0.5rem;
	background: #22c55e;
}

Or using

Tailwind CSS:

<div class="w-full top-0 left-0 fixed h-2 z-10">
	<div class="h-2 bg-green-500" />
</div>

(add the scrollspy-interior class to the inner div if you’re using vanilla JS below)

JS

First, give your article an ID: <article id="main-article">

Vanilla JS

let articleElement;

window.addEventListener('load', () => {
	articleElement = document.getElementById('main-article');
});

window.addEventListener('scroll', () => {
	const scrollPercent = window.scrollY / articleElement.offsetHeight;
	document.querySelector('scrollspy-interior').style.width = (scrollPercent ?? 0) * 100;
});

Or using a JS framework, Svelte for example:

Svelte

<script>
	import { onMount } from 'svelte';

	let scrollPercent, articleElement;

	onMount(() => {
		articleElement = document.getElementById('main-article');
	});

	const onScroll = () => {
		scrollPercent = window.scrollY / articleElement.offsetHeight;
	};
</script>

<svelte:window on:scroll={onScroll} />

<div class="w-full top-0 left-0 fixed h-2 z-10">
	<div class="h-2 bg-green-500" style="width:{(scrollPercent ?? 0) * 100}%" />
</div>

Closing

Hope this helped you out. Feel free to check out our other articles