Reading Progress Bar in Kadence

Kadence > Elements > Fixed Section > Fixed Top After Scroll 10/100 > Display Single Beiträge

Spaltenlayout mit id gw-reading-progress > bg Farbe geben > 5px Höhe – kein Padding

In Custom CSS des Blocks Höhe anpassen

CSS
selector {
  position: relative;
  top: 60px;
}

Innerhalb davon nochmal Spaltenlayout – leer ohne Padding

Dann JS Code einfügen als Snippet

JavaScript
document.addEventListener('DOMContentLoaded', function() {
    var progressBar = document.getElementById('gw-reading-progress');

    window.addEventListener('scroll', function() {
        var contentWrap = document.querySelector('.content-wrap .entry-content');
        if (!contentWrap) return;

        var contentHeight = contentWrap.offsetHeight;
        var contentTop = contentWrap.getBoundingClientRect().top + window.scrollY;
        var viewportHeight = window.innerHeight;
        var scrollY = window.scrollY;

        var progress = 0;

        if (scrollY >= contentTop) {
            var scrollEnd = contentTop + contentHeight - viewportHeight;
            progress = (scrollY - contentTop) / (scrollEnd - contentTop) * 100;
            progress = Math.min(progress, 100);
        }

        progressBar.style.width = progress + '%';
    });
});