Tutoriel : Coder une Progress Bar en quelques étapes faciles

1- Préparation du fichier JavaScript pour coder la Progress Bar

Coder une Progress Bar n’est pas aussi difficile qu’il n’y parait. Avec les nouvelles technologies comme ChatGPT. Il est aisé de retrouver un code de base et de l’intégrer.

Mais reprendre un code sans savoir le personnaliser peut frustrer les développeurs juniors.

Créer la structure HTML de la Progress Bar en JavaScript

Pour commencer, nous aurons besoin de deux <div> contenant la Progress Bar. Pour cela, je vais dire à JS de me créer des div juste avant la balise de fermeture du <footer>.

const progressBarContainer = document.createElement("div");
progressBarContainer.id = "progress-bar-container";

const progressBar = document.createElement("div");
progressBar.id = "progress-bar";
progressBarContainer.appendChild(progressBar);

On déclare deux constantes avec lesquelles l’on stocke deux id pour le CSS.
Puis, on va le placer juste avant la balise footer:

const footer = document.querySelector("footer");
if (footer) {
  footer.parentNode.insertBefore(progressBarContainer, footer);
}

Créer une function pour écouter le scroll

Puis, on va créer un function qui va écouter le scroll de la souris comme ceci :

window.addEventListener("scroll", () => {
const totalHeight =
    document.documentElement.scrollHeight - document.documentElement.clientHeight;
  const scrollTop = window.scrollY || document.documentElement.scrollTop;
  const scrollPercentage = (scrollTop / totalHeight) * 100;

  progressBar.style.width = `${scrollPercentage}%`;
}

Ici, on va calculer, la hauteur et la position de la page et terminer par une division, on obtient un pourcentage en fonction de la position la progress bar, avance ou recul.

A voir : Apprendre à faire des cards en CSS

2-Un peu de CSS pour la Progress Bar

À présent, on rajoute le CSS:

#progress-bar-container {
      position: fixed;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 0);
      margin-bottom: 5px;
      width: 80%;
      height: 5px;
      background-color: rgba(0, 0, 0, 0.884);
      z-index: 1000;
     
    }

 #progress-bar {
      &{
        transition:background-color 0.2s ease;
        height: 100%;
        width: 0%;
        background-color: #df3112;
        transition: width 0.2s ease;
      }

A voir : WP_Query : optimiser vos requêtes dans WordPress

Conclusion

Et voilà, c’est fini, n’oubliez pas de déclarer votre script à la fin de votre page web sur laquelle vous voulez rajouter le code.

Si vous avez des difficultés ou apporter des remarques

Commentez !