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!
Related Posts
-
SCEditor – a lightweight jQuery WYSIWYG editor
No Comments | Jan 6, 2016 -
Hashids – Generate short unique IDs in JavaScript and other languages
No Comments | Mar 21, 2016 -
Tutorial: An introduction to CSS 3D transforms
No Comments | Feb 17, 2016 -
Ghost-style jQuery notification plugin – goNotification
No Comments | Mar 25, 2016