Barre de progression personnalisable

Ce script gère les 3 styles de barre de progression, installez uniquement celles dont vous avez besoin.

Anneau

Pour la barre de progression en anneau (autour du menu burger) nous allons utiliser une structure particulière.
Voici celle que je vous conseille :‍

Ajoutez l'attribut suivant :

Name

nl-progress-bar

copié !

Value

circle

copié !

Vous pouvez ajouter cet attribut sur :

Div block

Création de la structure :
1 burger-component : Position relative (ou absolue) + flexbox X & Y center + taille définie en largeur et hauteur. C'est sur cet élément qu'il faut ajouter l'attribut.
2 : code embed : en position absolue full,  copiez collez le code que vous trouverez juste en dessous dans le code embed.

Code embed :

<svg viewBox="0 0 60 60" preserveAspectRatio="xMidYMid meet" 
     style="width: 100%; height: 100%; pointer-events: none;">
     
    <circle r="28" cx="30" cy="30" 
            fill="transparent" 
            stroke="#FF0000" 
            opacity="0.2"
            stroke-width="2">
    </circle>
    
    <circle class="progress-circle" r="28" cx="30" cy="30" 
            fill="transparent" 
            stroke="currentcolor" 
            stroke-width="2"
            stroke-dasharray="176 176"
            stroke-dashoffset="176">
    </circle>
</svg>

<style>
.progress-circle {
    transform-origin: center;
    transform: rotate(-90deg);
    transition: stroke-dashoffset 0.1s linear;
}
</style>

Copier

ℹ️ Information

Dans le code embed, vous trouverez 2 cercles :
1 cercle "guide" rouge, mettre opacity="0" pour le rendre invisible.
2 cercle qui se rempli au défilement de la page, réglez sa couleur directement dans le designer webflow, c'est la couleur de la typographie. Ajustez son épaisseur grâce à stroke-width="2"

💡 Note

Il reste à configurer les offsets, voir plus bas.

Par défaut, le script calcule la progression du tout premier pixel en haut de l'écran, jusqu'au tout dernier en bas. Mais en réalité, votre site a sans doute un menu fixe en haut, et vous souhaitez sûrement que la barre soit totalement remplie quand la fin de l'article se trouve au milieu de l'écran.
Les Offsets servent à redéfinir la "Ligne de départ" et la "Ligne d'arrivée" de votre barre.

Les offsets sont responsive, voici la logique :
nl-progress-bar-offset-top="100px, 64px, 48px" (desktop, tablette, mobile).
Décalage desktop : 100px
Décalage tablette : 64px
Décalage mobile : 48px

Si vous ne définissez qu'une valeur, elle sera appliqué sur tous les écrans :
nl-progress-bar-offset-top="100px"
100px de décalage sur desktop, tablette et mobile.

Si vous définissez deux valeurs, elles seront appliquées comme ceci :
nl-progress-bar-offset-top="100px, 64px"
100px de décalage sur desktop, et 64px sur tablette et mobile.

Vous avez 1 attribut sur votre source :
nl-progress-bar-src="is-source" 🟨 FACULTATIF

Vous avez entre 1 et 3 attribut(s) sur chaque barre de progression :
nl-progress-bar="horizontal/vertical/circle" 🟩 OBLIGATOIRE
nl-progress-bar-offset-top="desktop, tablet, mobile" 🟨 FACULTATIF
nl-progress-bar-offset-bottom="desktop, tablet, mobile" 🟨 FACULTATIF

J'espère que ce petit script vous aidera à améliorer le confort de vos visiteurs !