CSS-only Reading Progress Bar

In this step-by-step guide, we will build a reading progress bar using only CSS to animate it.

Try it out:

See the Pen Untitled by Carol-Theodor Pelu (@Tynael) on CodePen.

You can find the source code here.

The catch is that we’re going to use a new experimental CSS property called animation-timeline.

This lets us specify the timeline used to control a CSS animation’s progress.

Because it’s still in an experimental phase, it’s not yet supported by all the browsers.

I recommend checking out developer.mozilla.org for more information.

Let’s get started!

🎥 If you prefer the video version of this article:

HTML

First up, we have to define a div element that will act as the progress bar.

<div class="reading-progress-bar"><div>

Next, let’s create a container that will be fixed to the top of the viewport.

	<div class="reading-progress-bar-container">
	    <div class="reading-progress-bar"></div>
	</div>

It’s good to add a dummy text as well to make the container visible and easier to work with:

<div class="reading-progress-bar-container">
    I'm the container
    <div class="reading-progress-bar"></div>
</div>

Sweet! Let’s go ahead and code the CSS.

Styling the Container

Let’s focus first on the reading progress bar container.

.reading-progress-bar-container {
}

We want the progress bar to be fixed and relative to the browser window.

The bar must stay in the same place as we scroll the page.

To make this happen, we need to add position: fixed;

.reading-progress-bar-container {
		position: fixed;
}

Next, we want this container to be positioned at the very top of the viewport.

.reading-progress-bar-container {
		position: fixed;
		top: 0px;
}

The reading progress bar must span the entire width of the page.

.reading-progress-bar-container {
		position: fixed;
		top: 0px;
		width: 100%;
}

I choose the background to be a shade of purple, but you can choose any color you want.

.reading-progress-bar-container {
		position: fixed;
		top: 0px;
		width: 100%;
		background: #6c2fa2;
}

Next, we want the container to appear on top of the other elements (there aren’t any in this tutorial).

.reading-progress-bar-container {
		position: fixed;
		top: 0px;
		width: 100%;
		z-index: 999;
}

Now it’s time to style the reading progress bar.

Styling the Reading Progress Bar

Let’s create the reading-progress-bar class.

.reading-progress-bar {
}

Set a height of 10 pixels.

.reading-progress-bar {
  height: 10px;
}

I’m going with a shade of teal as a background but you can choose any color you want.

.reading-progress-bar {
  height: 10px;
  background: #069A8E;
}

Now we want to link the reading-progress-bar class to the width keyframe animation so that it gets animated when the user is scrolling.

.reading-progress-bar {
  height: 10px;
  background: #069A8E;
  animation-name: width;
}

And now the animation-timeline property comes into play.

Set its value to scroll(y) which ties the animation to the vertical scroll position of the viewport.

.reading-progress-bar {
  height: 10px;
  background: #069A8E;
  animation-name: width;
  animation-timeline: scroll(y);
}

Next, we have to define the keyframe animation named width.

@keyframes width {
}

The progress bar should start with no width and we want to incrementally reach to 100% as we scroll down the page.

@keyframes width {
  from { width: 0 }
  to { width: 100% }
}

Let’s remove the dummy text we added earlier to the HTML.

<div class="reading-progress-bar-container">
    <!-- I'm the container -->
    <div class="reading-progress-bar"></div>
</div>

We’re done! 🎉

It’s time to try out the reading progress bar and see if it’s working as expected!

Comments