RGB logo

RGB Studios.org

A web development company

Justin Golden — 9/16/2022

Creating an Article Progress Bar with Javascript

webdev
javascript
css
ui
react
vue
svelte
Photo credit @beccatapert on Unsplash

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


More Blog Articles
  Share   Tweet   Pin   Share   Post   Post   Share   Email