Barre de progression personnalisable Webflow
Ajoutez une barre de progression au scroll (horizontale, verticale ou circulaire) sur Webflow. Script Vanilla JS, responsive et 100% Custom Attributes.
Description
Un script 100% Vanilla JS pour ajouter une barre de progression de lecture (horizontale, verticale ou circulaire) avec une gestion des offsets selon vos breakpoints.
💡 Le secret de sa flexibilité : Le script calcule la progression en temps réel en fonction de la taille de l'écran et des unités que vous choisissez (px, rem, vh, %). Il gère nativement le redimensionnement de la fenêtre pour éviter les bugs d'affichage sur mobile ou tablette.
Fonctionnalités :
- 🎯 100% Custom Attributes (Zéro classe CSS) : Construisez et stylisez votre barre directement dans le Designer Webflow (couleur, épaisseur, position). Le script se connecte uniquement via les attributs.
- 📱 Offsets responsives : Ajustez le point de départ et de fin de la progression avec des valeurs différentes pour Desktop, Tablette et Mobile (ex:
100px, 2rem, 56px). - ⚙️ 3 Formats inclus : Fonctionne pour une ligne de lecture classique en haut de l'écran, une barre verticale (sidebar), ou même un anneau circulaire autour de votre menu burger.
- ⚡️ Zéro Dépendance : Pas besoin de charger GSAP ou d'autres lourdes bibliothèques d'animation pour un simple effet de scroll.
⚠️ Important
- État initial (Horizontale / Verticale) : Dans le Designer Webflow, pensez impérativement à définir la taille de départ de votre barre d'animation à 0% (
Width: 0%pour le mode horizontal, ouHeight: 0%pour le mode vertical). - Mode Circulaire : Si vous utilisez la valeur
circle, votre élément Webflow doit être un code HTML intégré (Embed) contenant un<svg>avec une balise<circle>. Le script ciblera automatiquement le dernier cercle du SVG pour l'animer. - Z-Index : N'oubliez pas de donner un
z-indexélevé à votre barre de progression pour qu'elle passe bien par-dessus votre contenu.
Custom attributes
Installation :
Étape 1 : Ajoutez ce code dans le before body de votre page
<!--{ NL-Progress-Bar }-->
<script src="https://cdn.jsdelivr.net/gh/nicolas-leitao/webflow-scripts/nl-progress-bar.js" defer></script>
Étape 2 : Choix de la source (Optionnel)
Par défaut, la barre suivra le défilement de la page entière (body). Si vous souhaitez qu'elle ne suive qu'une partie spécifique, ajoutez l'attribut nl-progress-bar-src="is-source" sur la div concernée.
Étape 3 : Création de la barre
- Pour le mode Horizontal ou Vertical : Pensez absolument à définir la taille initiale à
0%dans le Designer Webflow pour éviter un flash visuel au chargement. - Pour le mode Circulaire : Ajustez la couleur du cercle via la couleur de typographie du parent et réglez si besoin l'opacité du cercle rouge à 0 pour qu'il soit transparent.
Progress bar horizontale :
<div nl-progress-bar="horizontal"
nl-progress-bar-offset-top="128px, 128px, 112px"
nl-progress-bar-offset-bottom="50vh"
class="progress-bar-horizontal"
style="width: 0%;">
</div>Progress bar verticale :
<div class="container-absolute">
<div class="container-sticky">
<div nl-progress-bar="vertical"
nl-progress-bar-offset-top="128px, 128px, 112px"
nl-progress-bar-offset-bottom="50vh"
class="progress-bar-vertical"
style="height: 0%;">
</div>
</div>
</div>Progress bar ring :
HTML :
<div nl-progress-bar="circle"
nl-progress-bar-offset-top="128px, 128px, 112px"
nl-progress-bar-offset-bottom="50vh"
class="nl-burger-component">
<div class="progress-bar-circle w-embed">
<svg viewBox="0 0 60 60" style="width: 100%; height: 100%; pointer-events: none;">
<circle r="28" cx="30" cy="30" fill="transparent" stroke="transparent" stroke-width="2"></circle>
<circle class="progress-circle" r="28" cx="30" cy="30" fill="transparent" stroke="currentcolor" stroke-width="2"></circle>
</svg>
<style>
.progress-circle {
transform-origin: center;
transform: rotate(-90deg);
transition: stroke-dashoffset 0.1s linear;
}
</style>
</div>
<div class="nl-wrapper-burger-line">
<div class="nl-burger-line"></div>
<div class="nl-burger-line"></div>
<div class="nl-burger-line"></div>
</div>
</div>SVG (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>
💡 À savoir : Le script ciblera toujours la dernière balise <circle> trouvée dans le SVG. Vous pouvez donc créer un premier cercle gris clair pour faire "le fond de la piste", et utiliser le second pour la couleur de progression !
Étape 4 : Gestion des Offsets (Décalages)
Ajustez les attributs nl-progress-bar-offset-top et nl-progress-bar-offset-bottom selon vos besoins. Vous pouvez utiliser 1, 2 ou 3 valeurs séparées par des virgules pour gérer le responsive (Desktop, Tablette, Mobile). Le script convertit nativement les unités, vous pouvez utiliser ce que vous voulez ;)