โ–ผ
Streaming live at 10am (PST)

Reading progress bar for articles / one page sites :-)


#1

Howdy folks,

I recently had to add a reading progress bar to a blog I was building for a client. Thought this might come in handy, especially with the CMS feature being rolled out soon :smile:

Here's a quick example: http://vodafone-story-example.webflow.io

And here's how to add it to your site:

1) Add below CSS to Page Settings > Custom Header Code section (you can change colors, positioning, etc):

<style>
progress {
    /* Positioning */
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: 3px;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;

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

    /* Progress bar container for Firefox/IE10+ */
    background-color: transparent;

    /* Progress bar value for IE10+ */
    color: #E60000;
}
progress::-webkit-progress-bar {
    background-color: transparent;
}
progress::-webkit-progress-value {
    background-color: #E60000;
}
progress::-moz-progress-bar {
    background-color: #E60000;
} 
</style>

2) Add below jQuery code to Page Settings > Custom Footer Code section:

<script>
$(document).on('ready', function() {  
  var winHeight = $(window).height(), 
      docHeight = $(document).height(),
      progressBar = $('progress'),
      max, value;

  /* Set the max scrollable area */
  max = docHeight - winHeight;
  progressBar.attr('max', max);

  $(document).on('scroll', function(){
     value = $(window).scrollTop();
     progressBar.attr('value', value);
  });
});
</script>

3) Add below into an embed code component in Designer view. You will need to add a class to your embed & match the positioning of the element in order for your progress bar to display.

<progress value="0"></progress>

& that's it! Have fun! :smile:


Scrolldown Progress Bar
Problems with Custom Progress Bar
#2

#3

#4

Now you donโ€™t need code to build this :slight_smile: