Comment créer une « step progress bar » ou barre de progression par étape
Ce genre de design est surtout visible sur les sites e-commerce ou les formulaires multi-étapes. On affiche des numéros, au clic sur un bouton on passe à l’étape suivante. Les numéros permettent de voir où l’on se situe.
Une progression en 4 étapes
Voici donc un exemple simple, les numéros sont grisés par défaut (opacity;0.5) et au clic s’affichent à pleine opacité (opacity:1). Les div sont également cachées, positionnées en absolute, et la suivante remplace la précédente. Ici on peut passer de la 1ère à la dernière position et inversement.
See the Pen
Tab list by blindDev (@yuyazz)
on CodePen.
Une progression en 3 étapes
Et voici un exemple similaire en 3 étapes seulement
See the Pen
Simple Jquery – Css Step Process by blindDev (@yuyazz)
on CodePen.