Reading Progress Bar For Blogger Blog

After a long break of writing about coding & web elements, today I came up with the great design technique to grab user's attention to page's UX Design, yes I'm talking about Reading Position Indicator (RPI). I've seen quite a few web pages that have some kind of an indicator to display the current reading position. Normally, such a Reading Position Indicators are used on blog posts or long-form articles and help users to understand how far they are from finishing the reading but you may also find it Chrome's android application in the form loading bar (and Apple's browser Safari, a very similar looking loading bar).

Principle behind this technique

Developer of plugins uses the simple technique by following the fact that the user must have to scroll the page if he/she wishes to read complete article or browse the whole webpage. The technique he used revolves around the scroll event which is likely to be the key to determine an approximate position of the reader.

In this post, we will learn how to add Reading Position Indicator to blogger blog, to apply it we have to follow the simple steps:

• Sign in Blogger > Template > Backup template
• Click "Edit HTML"
• Just above

1. Just above </head> tag paste the following source link:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type='text/javascript'>
//<![CDATA[

$(document).ready(function(){
 
    var getMax = function(){
        return $(document).height() - $(window).height();
    }
 
    var getValue = function(){
        return $(window).scrollTop();
    }
 
    if('max' in document.createElement('progress')){
        // Browser supports progress element
        var progressBar = $('progress');
     
        // Set the Max attr for the first time
        progressBar.attr({ max: getMax() });

        $(document).on('scroll', function(){
            // On scroll only Value attr needs to be calculated
            progressBar.attr({ value: getValue() });
        });
   
        $(window).resize(function(){
            // On resize, both Max/Value attr needs to be calculated
            progressBar.attr({ max: getMax(), value: getValue() });
        }); 
    }
    else {
        var progressBar = $('.progress-bar'),
            max = getMax(),
            value, width;
     
        var getWidth = function(){
            // Calculate width in percentage
            value = getValue();         
            width = (value/max) * 100;
            width = width + '%';
            return width;
        }
     
        var setWidth = function(){
            progressBar.css({ width: getWidth() });
        }
     
        $(document).on('scroll', setWidth);
        $(window).on('resize', function(){
            // Need to reset the Max attr
            max = getMax();
            setWidth();
        });
    }
});
$(document).ready(function(){

$('#flat').addClass("active");
$('#progressBar').addClass('flat');

$('#flat').on('click', function(){
$('#progressBar').removeClass().addClass('flat');
$('a').removeClass();
$(this).addClass('active');
$(this).preventDefault();
});

}); 
//]]>
</script>

2. Search for following the code or somewhat similar:

<b:includable id='post' var='post'> <article class='post hentry'>

Note: You may not be able to find the same code, but you have to the below code just before starting your article content to allow script calculate the content area.You can ask your questions in the comment form below

3. and add the following code just below the code above or the below the code similar to it:

<progress id='progressBar' value='0'>
<div class='progress-container'>
<span class='progress-bar'/>
</div>
</progress>

Great! Now it's time to stylize the progress bar, so let's add some spicy CSS code to our template StyleSheet.

4. Search for the following line of code:

]]></b:skin>

5. Finally, add the following code just above the code:

 /* reading position indicator */
progress {
  /* Positioning */
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 101;

  /* Dimensions */
  width: 100%;
  height: .25em;

  /* Reset the apperance */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  /* Get rid of the default border in Firefox/Opera. */
  border: none;

  /* For Firefox/IE10+ */
  background-color: transparent;

  /* For IE10+, color of the progress bar */
  color: red;
}

progress::-webkit-progress-bar {
  background-color: transparent;
}

.flat::-webkit-progress-value {
  background-color: red;
}

.flat::-moz-progress-bar {
  background-color: red;
}


.progress-container {
  width: 100%;
  background-color: transparent;
  position: fixed;
  top: 0;
  left: 0;
  height: .25em;
  display: block;
}

.progress-bar {
  background-color: red;
  width: 50%;
  display: block;
  height: inherit;
}

We have options to change the color of progress bar if you want:

• To change the background colour of progress bar edit background-color: red;
• To change the height of the progress bar edit height: .25em;

 We have options to change the color of progress bar if you want:

The credit of this plugin goes to Pankaj Parashar, he wrote the great in-detail article on CSSTricks. 

Would love to hear your feedback on this little effort.I tried my best to create a user-friendly tutorial but if there is anything troubling you, please don't hesitate to ask your question in the comment form below, would love to solve as soon as time allows. Peace & Blessing! :)

Ishtiaq Ahmad on April 19, 2018