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.

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">
  <article>
    <header>
      <img src="img/img-1.png" alt="article image">
      <h1>Title 1</h1>
    </header>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit....</p>
    <!-- additional content here -->
  </article>

  <article>
    <!-- article content here -->
  </article>

  <!-- additional articles here -->

  <aside class="cd-read-more">
    <ul>
      <li>
        <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)">
            </circle>
          </svg>
        </a>
      </li>
      <!-- additional links to articles -->
    </ul>
  </aside>
</div>

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:

updateArticle()

and

updateSidebarPosition()

Check this cool demo of reading progress indicator:

http://javascript-html5-tutorial.net/demos/reading-progress-indicator/index.html

Read more in the original tutorial:

https://codyhouse.co/gem/reading-progress-indicator

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

Enjoy!