Tutorial: A nice reading progress indicator

A short tutorial about creating a nice reading progress indicator solution.

Creating a nice reading progress indicator – tutorial

Building a widget containing a list of suggested articles, with the reading progress indicator powered by HTML5, CSS, jQuery and SVG.

Reading progress indicator - tutorial demo
Reading progress indicator – tutorial demo

The HTML structure is composed by article elements for the article contents, and an aside element wrapping the list of suggested articles.

<div class="cd-articles">
      <img src="img/img-1.png" alt="article image">
      <h1>Title 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit....</p>
    <!-- additional content here -->

    <!-- article content here -->

  <!-- additional articles here -->

  <aside class="cd-read-more">
        <a href="index.html">
          <em>20 Star Wars Secrets Revealed</em>
          <b>by J. Morrison</b>
          <svg x="0px" y="0px" width="36px" height="36px" viewBox="0 0 36 36">
            <circle fill="none" stroke="#2a76e8" stroke-width="2" cx="18" cy="18" r="16"
              stroke-dasharray="100 100" stroke-dashoffset="100" transform="rotate(-90 18 18)">
      <!-- additional links to articles -->

After crating the structure, the next step would be adding styles. The aside element is visible only on big devices (viewport width bigger than 1100px): it has an absolute position and is placed in the top-right corner of the .cd-articles element; the class .fixed is then used to change its position to fixed so that it’s always accessible while the user scrolls through the articles.

@media only screen and (min-width: 1100px) {
  .cd-articles {
    position: relative;
    width: 970px;
    padding-right: 320px;
.cd-read-more {
  /* hide on mobile */
  display: none;
@media only screen and (min-width: 1100px) {
  .cd-read-more {
    display: block;
    width: 290px;
    position: absolute;
    top: 3em;
    right: 0;
  .cd-read-more.fixed {
    position: fixed;
    right: calc(50% - 485px);

And a little bit o JavaScript. There are simple event handlers:




Check this cool demo of reading progress indicator:


Read more in the original tutorial:



See also:

jQuery progress indicator for table of contents

Tutorial: jQuery quote rotator with a nice progress indicator

Progression.js – jQuery form progress indicator

Slim progress bar jQuery plugin – NProgress

A percentage loader jQuery plugin

JavaScript responsive progress bar solution