Creating reading progress bar in bricks is fairly simple. Just copy and past below code inside bricks code block element. That’s is.
<style>
#progress-bar {
position: fixed;
top: 0; left: 0;
height: 2px;
background-color: #f44336;
width: 0%;
transition: width 0.3s ease-in-out;
}
</style>
<div id="progress-bar"></div>
<script>
function updateProgressBar() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrollPercentage = (scrollTop / scrollHeight) * 100;
const progressBar = document.getElementById('progress-bar'); progressBar.style.width = `${scrollPercentage}%`;
}
window.addEventListener('scroll', updateProgressBar);
updateProgressBar();
</script>