HomeServiceContact
JavaScript
min read
February 13, 2018
November 19, 2016

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

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

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:


<polymer-meter></polymer-meter>

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.

Styling

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

Example:


polymer-meter{   --progress-meter-color: red; }

Custom property                Description                                                     Default
--progress-meter-
color
Background color of the
progress indicator
green
polymer-meter
Written by
Artwork by
No art workers.
We'd love to talk about your business objectives