Dans ce tutoriel, nous allons créer une barre de progression responsive étape par étape. Ces barres sont généralement utilisées lorsqu'un grand formulaire est divisé en plusieurs étapes. Elles permettent à l'utilisateur de savoir quelle partie du formulaire il a remplie et quelle partie il lui reste à remplir.
Voici à quoi ressemblera la barre de progression finale :
Commençons par écrire le code HTML :
<div id="progress">
<div id="progress-bar"></div>
<ul id="progress-num">
<li class="step active">1</li>
<li class="step">2</li>
<li class="step">3</li>
<li class="step">4</li>
</ul>
</div>
Vous pouvez facilement ajouter d'autres étapes ici si nécessaire et la barre de progression restera réactive et fonctionnelle. Nous aurons également besoin de quelques boutons pour contrôler la progression des étapes comme suit :
<div style="text-align:center;">
<button id="progress-prev" class="btn" disabled>Précédent</button>
<button id="progress-next" class="btn">Suivant</button>
</div>
Passons maintenant au JavaScript.
Commençons par les variables des différents éléments :
const progressBar = document.getElementById("progress-bar");
const progressNext = document.getElementById("progress-next");
const progressPrev = document.getElementById("progress-prev");
const steps = document.querySelectorAll(".step");
let active = 1;
Pour naviguer à travers les étapes, nous allons ajouter un eventListener pour détecter les clics sur chacun des boutons :
progressNext.addEventListener("click", () => {
active++;
if (active > steps.length) {
active = steps.length;
}
updateProgress();
});
progressPrev.addEventListener("click", () => {
active--;
if (active < 1) {
active = 1;
}
updateProgress();
});
Cela augmente ou diminue le compte actif en fonction du bouton cliqué. Elle empêche également le compte actif d'être supérieur ou inférieur au nombre d'étapes. Nous appelons également une fonction updateProgress qui ressemble à ceci :
const updateProgress = () => {
// faire basculer la classe active sur les éléments de la liste
steps.forEach((step, i) => {
if (i < active) {
step.classList.add("active");
} else {
step.classList.remove("active");
}
});
// définir la largeur de la barre de progression
progressBar.style.width =
((active - 1) / (steps.length - 1)) * 100 + "%";
// activer/désactiver les boutons "Précédent" et "Suivant".
if (active === 1) {
progressPrev.disabled = true;
} else if (active === steps.length) {
progressNext.disabled = true;
} else {
progressPrev.disabled = false;
progressNext.disabled = false;
}
};
Le script ci-dessus fait 3 choses :
À présent, passons au CSS
Il ne nous reste plus qu'à ajouter un peu de CSS pour voir la barre de progression en action :
#progress {
position: relative;
margin-bottom: 30px;
}
Positionnement relatif afin que nous puissions utiliser la position absolue sur les éléments enfants.
#progress-bar {
position: absolute;
background: lightseagreen;
height: 5px;
width: 0%;
top: 50%;
left: 0;
}
Ceci définit les styles de base pour la barre de progression, nous changeons sa largeur dans le script JavaScript.
#progress-num {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
}
Cela permet de répartir uniformément les chiffres dans l'élément <div> parent, quelle que soit la largeur.
#progress-num::before {
content: "";
background-color: lightgray;
position: absolute;
top: 50%;
left: 0;
height: 5px;
width: 100%;
z-index: -1;
}
Pseudo-élément CSS qui représente la partie inactive de la barre de progression.
#progress-num .step {
border: 3px solid lightgray;
border-radius: 100%;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
background-color: #fff;
font-family: sans-serif;
font-size: 14px;
position: relative;
z-index: 1;
}
Style chaque étape inactive à l'intérieur d'un cercle.
#progress-num .step.active {
border-color: lightseagreen;
background-color: lightseagreen;
color: #fff;
}
Styles de la bordure et de la couleur d'arrière-plan des étapes actives pour qu'elles correspondent à la barre de progression.
.btn {
font-weight: bold;
padding: 7px 10px;
border: none;
border-radius: 3px;
background-color: lightgray;
cursor: pointer;
}
Styles des boutons "Précédent" et "Suivant".
Et voici le code source complet de ce tutoriel :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#progress {
position: relative;
margin-bottom: 30px;
}
#progress-bar {
position: absolute;
background: royalblue;
height: 5px;
width: 0%;
top: 50%;
left: 0;
}
#progress-num {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
}
#progress-num::before {
content: "";
background-color: lightgray;
position: absolute;
top: 50%;
left: 0;
height: 5px;
width: 100%;
z-index: -1;
}
#progress-num .step {
border: 3px solid lightgray;
border-radius: 100%;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
background-color: #fff;
font-family: sans-serif;
font-size: 14px;
position: relative;
z-index: 1;
}
#progress-num .step.active {
border-color: royalblue;
background-color: royalblue;
color: #fff;
}
.btn {
font-weight: bold;
padding: 7px 10px;
border: none;
border-radius: 3px;
background-color: lightgray;
cursor: pointer;
}
</style>
</head>
<body>
<div id="progress">
<div id="progress-bar"></div>
<ul id="progress-num">
<li class="step active">1</li>
<li class="step">2</li>
<li class="step">3</li>
<li class="step">4</li>
</ul>
</div>
<div style="text-align:center;">
<button id="progress-prev" class="btn" disabled>Précédent</button>
<button id="progress-next" class="btn">Suivant</button>
</div>
<script>
const progressBar = document.getElementById("progress-bar");
const progressNext = document.getElementById("progress-next");
const progressPrev = document.getElementById("progress-prev");
const steps = document.querySelectorAll(".step");
let active = 1;
progressNext.addEventListener("click", () => {
active++;
if (active > steps.length) {
active = steps.length;
}
updateProgress();
});
progressPrev.addEventListener("click", () => {
active--;
if (active < 1) {
active = 1;
}
updateProgress();
});
const updateProgress = () => {
// faire basculer la classe active sur les éléments de la liste
steps.forEach((step, i) => {
if (i < active) {
step.classList.add("active");
} else {
step.classList.remove("active");
}
});
// définir la largeur de la barre de progression
progressBar.style.width =
((active - 1) / (steps.length - 1)) * 100 + "%";
// activer/désactiver les boutons "Précédent" et "Suivant".
if (active === 1) {
progressPrev.disabled = true;
} else if (active === steps.length) {
progressNext.disabled = true;
} else {
progressPrev.disabled = false;
progressNext.disabled = false;
}
};
</script>
</body>
</html>
C'est tout pour ce tutoriel, vous êtes maintenant capable de créer une barre de progression fonctionnelle et responsive que vous pouvez personnaliser pour répondre à vos besoins.
