Giving your visitors the maximum information about the size of the texts you have on your website and the time it will take to read them is a good idea to improve the user experience of your site and make reading your content more enjoyable.
There are several ways to indicate the time of reading. For example, we can estimate the minutes that will take reading the text. We can do this through a PHP function that counts the words according to a number of words per second that we indicate. You can see it in our theme WordPress Rosalie.
But today’s tutorial will focus on creating a progress bar that tells us how much is left to finish reading our article. This bar will be completed as we go and scroll in the text, and then it will disappear.
So prepare your style sheet and remember these two articles on how to add CSS to WordPress and how to use the browser inspector, because if you want to add a progress bar to your website, you will surely need them.
How to create a temporary progress bar with CSS?
Creating a line of progress to estimate the reading time can be done with JavaScript by a function that measures the height of the container of the text (if we are using WordPress it will be the div with the class .entry-content) and fills the width of the bar of progress equaling both values: height of the container and width of the bar.
But as we like challenges at Silo Creativo, let’s see how we can get a progress bar with CSS and with our custom colours. Today there will be nothing of JS or PHP.
For this we have used an example of HTML that could well be an article in any WordPress. In fact, the text is taken from this article. As you can see we are going to use the .entry-content class (where WordPress will print the the_content();) and its container immediately superior, which will help us to create the progress bar using CSS pseudo-elements. Here you can learn more about the CSS pseudo-elements:
<section class="example-post">
<div class="entry-content">
<h2>Example Post</h2>
<p>Texto del post</p>
<p>Un poco más de texto</p>
<p>Párrafo final</p>
</div>
</section>Perfect, after this, the CSS arrives. Let’s make use of a new value for the property position. This is position: sticky;, which will allow us to set an element to the area that the user is only seeing when that element appears for the first time, that is, when the user scrolls and reaches it. The compatibility of sticky is still limited, but with the use of prefixes we begin to use it experimentally.
For this we will define two pseudo-elements, one with a triangular gradient that will go behind and another ahead, with position: sticky and fixed to the bottom. The height of both elements will define the effect. The gradient will inherit 100% of the height of the article, while the superimposed layer 100% of the height minus 6px. It would be like building a wall that occupies 95% of the height of the screen putting the gradient in that remaining 5% to give the effect of filling the progress bar.
.example-post {
position: relative;
}
.example-post:before {
content: "";
display: block;
background: linear-gradient(to right top, #CDDC39 0%, #03A9F4 50%, #e6f0f5 50%);
height: calc(100% - 100vh + 6px);
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.example-post:after {
content: "";
display: block;
background: #e6f0f5;
height: calc(100vh - 6px);
width: 100%;
position: -webkit-sticky;
position: sticky;
bottom: 0;
left: 0;
}
.entry-content {
position: relative;
z-index: 1;
margin-bottom: calc(-100vh + 6px);
}As you can see in the code, the height values are retouched based on the height of the screen area. You can also see a fix with a lower negative margin for the content of the article, and even though the pseudo-element that we have created before has a sticky value, until it occupies the indicated position it counts as the height of the container, that is, it occupies space, not like absolute or fixed.
Progress bars to improve the user experience
Who does not remember those progress bars in previous versions of Windows that seemed never to end, or simply was completed again and again (Windows Vista,) giving the impression that something was happening but without a real estimate of when the process would end?
This type of detail is what undermines the experience of our users and small details like this progress bar can get a much more controlled reading of our articles. Personally I had always thought that the browser’s scroll bar could be used to mark the length of content, but this is not always the case. On the one hand there are times when comments occupy much more than the content itself, here is an example. And on the other hand that bar is not always available in mobile browsers.
Along with the article of the animation of the hamburger icon and the floating social bar with HTML and CSS we can achieve great results in user experience with small details, and everything with HTML and CSS. I hope it could help you!
