You know those fancy progress bars that appear at the top or bottom of the page while you scroll through the article? Today we’re going to learn how to create one such progress bar using only CSS calc() property. You can find the final code at the bottom of the post.
First things first, lets look at the browser compatibility for the calc() property. Looking at the table below it should work just fine in all modern browsers including IE9. Head over to CanIUse website for detailed compatibility list regarding this feature.
The code is pretty simple. We’re going to add a gradient background to the BODY element which is going to be 50% blue color (which indicates our progress) and 50% grey (which indicates size of the progress bar). Adding the gradient code to BODY element outputs something like this:
Using calc() is going to ensure that background gradient size is properly calculated, taking into account the height of our progress bar, which is going to be 6px. All that’s left is to add an overlay over the BODY element which will hide the rest of the gradient and show only top 6px of it. After implementing additional code to the BODY:after element we get this:
Now as we scroll the page BODY element also scrolls and shows different part of the background gradient. This was done using only few lines of CSS and works across all major browsers. Pretty neat, huh? Here’s the final code you need to implement in order for this to work:
If you want to target only Single Posts in WordPress just use this code on body.single-post selector instead.