Our Thoughts
Saket Kumar
Drupal Practice Lead - Frontend
19 November, 2016 2 MIN READ

New Polymer element to indicate reading position of your visitor - <polymer-meter>

19 November, 2016 2 MIN READ
Saket Kumar
Drupal Practice Lead - Frontend

Now a days we have seen quite a few websites that have some kind of an indicator to display the current reading position of readers. Generally, such indicators are used on blog posts or long form articles and help readers understand how far they are from finishing the article.

So here I have created a polymer element which can be used on your site easily and gives this functionality. I have used a horizontal progress bar to use as a indicator.

The principle logic behind this element:

To build this element we had to use two information from the user - 

  1. What is the length of the page ?
  2. What is the current reading position of the user?

So to develop this element we used the fact that user has to scroll to the end of the page, to read the article. Here the main principle targets the scroll event which is used to determine the position of the user while reading the article.

  1. To get the length of page  - I checked the amount of page user scrolls to reach the end of page, this would become the max attribute.
  2. To get the current reading position of the user - I calculated the vertical offset of the top of the document from the top of the window which would be our value attribute. 

Demo - https://qed42.github.io/polymer-meter/

Github project -- https://github.com/qed42/polymer-meter

Using polymer-meter Element in your Project

Install this using bower

$ bower install polymer-meter --save-dev

Add the element element using html imports

<link rel="import" href="../polymer-meter.html">

Example Usage:


Place this element at the top your page, it will watch the length of the page and at the top it will display a indicator show how much of the page you have already covered.

You may not insert any custom DOM inside of this indicator element.


You can control the color of the indicator using css property '--progress-meter-color'


  --progress-meter-color: red; 
Custom property Description Default
--progress-meter-color Background color of the progress indicator green


Saket Kumar