Lors de la création de formulaires ou de pages de portail interactifs et conviviaux sur le site, les développeurs intègrent généralement des barres de progression réactives et attrayantes et informent l'utilisateur de l'état de remplissage du formulaire ou créent un profil. Ces types de fonctionnalités sont d’une grande aide pour améliorer l’expérience utilisateur d’un site spécifique.
Ce blog aborde les aspects suivants :
- Qu'est-ce qu'une barre de progression réactive ?
- Comment concevoir une barre de progression réactive en utilisant HTML, CSS et JavaScript ?
Qu'est-ce qu'une barre de progression réactive ?
Dans cette barre de progression particulière, un grand formulaire est divisé en plusieurs étapes. Cette barre informe les visiteurs de l'état des formulaires complétés et restants.
Comment concevoir une barre de progression réactive en utilisant HTML, CSS et JavaScript ?
Une barre de progression réactive peut être conçue à l'aide de HTML, CSS et JavaScript. Pour ce faire, consultez le code suivant. Tout d’abord, approfondissez la partie HTML du code, comme suit :
< h2 style = 'alignement du texte : centre ;' > Barre de progression réactive h2 >
< div identifiant = 'progrès' >
< div identifiant = 'progrès1' > div >
< ul identifiant = 'progrès2' >
< que classe = 'étape active' > 1 que >
< que classe = 'étape' > 2 que >
< que classe = 'étape' > 3 que >
< que classe = 'étape' > Fin que >
ul >
div >
< bouton identifiant = 'progression' classe = 'btn' désactivé > Dos bouton >
< bouton identifiant = 'progrèssuivant' classe = 'btn' > Suivant bouton >
Dans l'extrait de code ci-dessus, appliquez les méthodologies ci-dessous :
- Créez un titre et incluez deux ' ' éléments pour accumuler la barre de progression.
- Incluez également le «
- Enfin, créez deux boutons pour revenir en arrière ou passer à l'étape suivante, respectivement.
Code CSS
Maintenant, un aperçu du bloc de code CSS suivant :
< style taper = 'texte/css' >
#progrès {
position : relative ;
marge inférieure : 30 px ;
}
#progrès1 {
position : absolue ;
fond : vert ;
hauteur : 5px ;
largeur: 0 % ;
haut: cinquante % ;
gauche: 0 ;
}
#progrès2 {
marge: 0 ;
rembourrage: 0 ;
style de liste : aucun ;
afficher: fléchir ;
justifier-contenu : espace entre les deux ;
}
#progress2::avant {
contenu: '' ;
couleur de fond : gris clair ;
position : absolue ;
haut: cinquante % ;
gauche: 0 ;
hauteur : 5px ;
largeur: 100 % ;
indice z : -1 ;
}
#progress2 .étape {
bordure : 3 px, gris clair uni ;
rayon-frontière : 100 % ;
largeur : 25 px ;
hauteur : 25px ;
hauteur de ligne : 25 px ;
alignement du texte : centre ;
Couleur de l'arrière plan: #fff;
famille de polices : sans-serif ;
taille de police : 14 px ;
position : relative ;
indice z : 1 ;
}
#progress2 .step.active {
couleur de la bordure : vert ;
couleur de fond : vert ;
couleur: #fff;
}
style >Dans ce code :
- Ajustez la position relative de la barre de progression et la position absolue des éléments enfants sous-jacents.
- Stylisez également la barre de progression de telle sorte qu'avant de passer à l'étape suivante, elle comprenne une couleur par défaut et passe à une couleur différente lors du passage à l'étape suivante.
- Ceci est réalisé via le style, c'est-à-dire ' Couleur de l'arrière plan ' etc. chacune des étapes inactives et actives au sein du cercle.
Code JavaScript
Enfin, faites attention au bloc de code fourni ci-dessous :
< scénario taper = 'texte/javascript' >
laisser xBar = document.getElementById ( 'progrès1' ) ;
laisser xNext = document.getElementById ( 'progrèssuivant' ) ;
laisser xPrev = document.getElementById ( 'progression' ) ;
laisser étapes = document.querySelectorAll ( '.étape' ) ;
laisser actif = 1 ;
xNext.addEventListener ( 'Cliquez sur' , ( ) = < {
actif++;
si ( actif < étapes.longueur ) {
actif = étapes.longueur ;
}
réactifProgrès ( ) ;
} ) ;
xPrev.addEventListener ( 'Cliquez sur' , ( ) = < {
actif--;
si ( actif > 1 ) {
actif = 1 ;
}
réactifProgrès ( ) ;
} ) ;
const responsiveProgress = ( ) = < {
étapes.forEach ( ( étape, je ) = < {
si ( je > actif ) {
étape.classList.add ( 'actif' ) ;
} autre {
étape.classList.remove ( 'actif' ) ;
}
} ) ;
xBar.style.width =
( ( actif - 1 ) / ( étapes.longueur - 1 ) ) * 100 + '%' ;
si ( actif === 1 ) {
xPrev.disabled = vrai ;
} autre si ( actif === étapes.longueur ) {
xSuivant.disabled = vrai ;
} autre {
xPrev.disabled = FAUX ;
xSuivant.disabled = FAUX ;
}
} ;
scénario >Dans ces lignes de code :
- Tout d’abord, invoquez la barre de progression, et les boutons précédent et suivant via leur « identifiants ' en utilisant le ' getElementById() ' méthode.
- Après cela, appliquez le « addEventListener() ' méthode telle que lors du déclenchement ' Cliquez sur ', les étapes actives sont parcourues jusqu'à ce que les étapes soient terminées via l'événement ' longueur ' propriété.
- De même, revenez à travers les étapes.
- Invoquez également le « réactifProgress() » qui parcourt chacune des étapes et bascule la classe active via l'instruction « if/else ».
- Maintenant, attribuez la largeur de la barre de progression en pourcentage par rapport aux étapes actives et totales/toutes les étapes.
- Enfin, désactivez le bouton correspondant si l'étape active est la première ou la dernière.
Note: Dans ce cas, l’intégralité du code est contenu dans le même fichier HTML avec les balises dédiées pour « CSS ' et ' Javascript ' codes. Cependant, des fichiers distincts peuvent également être liés.
Sortir
Conclusion
Une barre de progression des étapes réactive entre en vigueur lorsqu'un formulaire volumineux est divisé en plusieurs étapes et peut être conçu à l'aide de HTML, CSS et JavaScript. Cette barre de progression peut également être personnalisée selon les exigences, c'est-à-dire en ajoutant ou en supprimant des étapes, etc. Dans cet article, nous avons développé la conception des barres réactives en utilisant HTML, CSS et JavaScript.
- Incluez également le «