Tutorial: A nice reading progress indicator

DirectCode | January 6, 2017 | Animation, Code snippets, CSS, HTML5, JavaScript, jQuery, Tools | No Comments

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">
  <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

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