"/>

Créer une Step Progress Bar

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.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.