Lasst uns einen Scroll Progress Bar mit HTML & CSS programmieren

Vor allem wenn man einen Blog oder eine Webseite mit viel Text hat, will man seine Leser darauf aufmerksam machen dass der Text noch weiter geht / länger ist. Dafür kann man entweder oben hinschreiben wie lange das Lesen dauert oder man baut einen Scroll Watcher ein. Das ist ein grafisches Element oben oder unten am Browser – Wo ein Querbalken immer breiter wird und 100% ausgefüllt ist wenn bis zum Ende der Webseite / Text runtergescrollt ist.

Ich finde das ein sehr praktische Sache – so weiss ich wie gross eine Webseite oder ein Text ist.

Video

HTML

<div class="scroll-watcher"></div>

Video

.scroll-watcher {
    height: 10px;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #fff700;
    z-index: 1000;
    scale: 0 1;
    transform-origin: left;
    animation: scroll-watcher linear;
    animation-timeline: scroll();

}

@keyframes scroll-watcher {
    to {
        scale: 1 1;
    }
}