Afficher une barre de progression horizontale qui évolue suivant l'avancement de la lecture de la page. En guise de démonstration, scrollez vers le bas (ou le haut) pour voir la barre violette qui grandit/rétrécit suivant où vous vous trouvez sur la page.

Le code est simple à appréhender, vous pourrez aisément l'adapter à votre situation.
Je n'ai pas trouvé de solution se passant de JavaScript, je suis preneur de tout conseil ☻

Voici le code HTML à placer n'importe où dans votre template :

<div id="scroll-bar">
    <div id="scroll-bar-inner"></div>
</div>

Le code CSS qui va bien :

#scroll-bar {
    height: 3px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden
}
#scroll-bar-inner {
    background-color: #a322dc;
    height: 100%
}

Et le code JavaScript. Ça ne m'ennuie pas d'utiliser JS, mais une version pure CSS serait tout de même assez géniale.

/* Calcul de votre progression sur la page
   et modification de la longueur de la scroll bar */
function scroll_bar() {
    'use strict';
    var t = document.querySelector('#scroll-bar'),
        a = document.body.clientHeight,
        n = window.innerHeight,
        g = window.pageYOffset,
        o = g / (a - n) * 100;

    t.style.width = o + '%';
}

// Appel de la fonction lorsque la page est chargée
window.addEventListener('load', scroll_bar);

/* Appel de la fonction lors d'un mouvement sur la page
   (scroll, mollette de la souris, flèches de direction, etc.) */
window.addEventListener('scroll', scroll_bar);

Historique

• 2016-10-20 : utilisation de window.pageYOffset plutôt que document.documentElement.scrollTop.