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

Community resources Webflow Tips
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):

    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;
    }

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

  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.

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

15 Likes
4

Now you don’t need code to build this :slight_smile:

2 Likes