Comprendre le fonctionnement de la barre d’Instagram Stories
Les Stories d’Instagram et de WhatsApp doivent une partie de leur fluidité caractéristique à ces élégantes barres de progression segmentées en haut de l’écran : une barre par story, qui se remplit l’une après l’autre. Un développeur a isolé cet effet pour en extraire les composants essentiels et l’a reconstruit en JavaScript et CSS natifs, libre à l’inspection et à la réutilisation.
La règle qui garantit la simplicité
Chaque barre représente une story. Seule la barre active grandit de 0 % à 100 %, tandis que les barres précédentes restent pleines et celles qui suivent restent vides. Une fois la barre active terminée, la suivante prend le relais et le cycle recommence. Aucune couche supplémentaire, aucun état caché : trois règles simples appliquées à chaque image.
Synchroniser l’animation avec le navigateur
Contrairement à une approche basée sur le CSS, cette reconstruction utilise une seule boucle requestAnimationFrame. À chaque image, elle vérifie le temps écoulé par rapport à la durée fixe de chaque story (environ quatre secondes) et ajuste la largeur de la barre active en conséquence. Passer à la story suivante se résume à réinitialiser les compteurs et à faire avancer le pointeur « actif ». Comme la boucle est en JavaScript, mettre en pause ou reprendre l’animation se fait simplement en activant ou désactivant un drapeau — ce qui serait plus complexe à gérer proprement avec des animations CSS pures.
Contrôler l’affichage
L’interface est divisée en deux zones horizontales : un appui sur la moitié droite permet d’avancer à la story suivante, tandis qu’un appui sur la moitié gauche revient en arrière. Maintenir la pression n’importe où gèle le minuteur, et le relâcher le relance. À chaque changement de story, le script recolore instantanément les barres : le passé reste rempli, le futur reste vide, et seul le segment actuel est en cours de remplissage. La démo interactive permet de tester le flux et même d’examiner le code.
Le résultat est un motif léger et réutilisable qui capture l’essence des Stories sans alourdir le développement comme le ferait une application sociale complète.
Source : DEV Community. Synthèse éditoriale assistée par IA — TechnoExpress.