In Helix Ultimate it is possible to activate a "Reading Time Progress Bar". In YOOtheme Pro you need to do this by hand.
In oder to get a progress bar you can do the following:
- create a module that contains not much but a "Module Class Suffix" like "progress-bar" at least.
- In your YOOtheme Pro theme, add the Javascript and CSS.
- Go to "Setting" -> "Custom Code" -> Script:
window.addEventListener('scroll', updateProgressBar);
function updateProgressBar() {
const windowHeight = window.innerHeight || document.documentElement.clientHeight;
const fullHeight = document.documentElement.scrollHeight - windowHeight;
const scrolledHeight = window.pageYOffset || document.documentElement.scrollTop;
const progress = (scrolledHeight / fullHeight) * 100;
const progressBarElements = document.getElementsByClassName('progress-bar-alexis');
for (let i = 0; i < progressBarElements.length; i++) {
progressBarElements[i].style.width = progress + '%';
}
}
updateProgressBar();
- Go to "Setting" -> "Custom Code" -> CSS/Less
.progress-bar{
width: 0;
height: 5px;
background-color: #4da4b0; /* Set text color to red */
position: fixed;
top: 0;
left: 0;
z-index: 9999;
transition: width 0.3s;
}