How to add Reading Progress Indicator in WordPress using Elementor
In this video, I'll show how to add a dynamic website reading progress bar or scroll indicator that shows how much you've read an article or scrolled through the page.
Source code from W3schools:
https://www.w3schools.com/howto/tryit...
NOTE: Whenever you update any template that has this code you may have to disable Wordfence or other security plugins before updating, otherwise you might get a 403 forbidden error.
All you need is Elementor free or pro and the Elementor HTML widget.
Follow the steps in the video and paste the following code into the style tags and also feel free to change the height to any value you need:
.progress-container {
width: 100%;
height: 10px;
background: #ccc;
}
.progress-bar {
height: 10px;
background: #4caf50;
background: linear-gradient(to right, red,blue);
width: 0%;
}
.scrollhead
{
position: fixed;
top: 0px;
left:0;
z-index: 1000;
width: 100%;
background-color: #f1f1f1;
}
.scrollhead1
{
position: fixed;
top: 0px;
left:0;
z-index: 1000;
width: 100%;
background-color: transparent;
}
Elementor HTML widget tutorial:
• Elementor HTML widget - Add HTML CSS ...
Elementor background gradients:
• Elementor gradient background tutoria...
Thumbnail Credits:
https://www.freepik.com/freepik