Article original : How to create a Custom Progress Bar

Par Florin Pop

Originalement publié sur www.florin-pop.com

Le thème pour la semaine #14 du Défi de codage hebdomadaire est :

Barre de progression

Une barre de progression est utilisée pour montrer à quel point une action de l'utilisateur est encore en cours jusqu'à ce qu'elle soit terminée. Un bon exemple est une barre de progression de téléchargement qui vous montre combien du fichier est déjà téléchargé (ou cela pourrait aussi être une barre de progression de téléversement si vous téléversez des fichiers ?).

Dans cet article, nous allons construire ce type de Barre de progression :

Le HTML

Pour la structure HTML, nous avons besoin de deux choses :

  1. un conteneur qui affichera la longueur totale (100%) de la barre de progression - .progress-bar
  2. l'élément de progression réel qui suivra essentiellement la progression actuelle (par exemple, 20%) - .progress
<div class="progress-bar">
    <div data-size="20" class="progress"></div>
</div>

Comme vous pouvez le voir, la div .progress a un attribut data-size. Cela sera utilisé en JavaScript pour définir la width de la progression. Vous verrez dans un instant ce que je veux dire, mais d'abord, stylisons ces deux éléments. ?

Le CSS

.progress-bar {
    background-color: #fefefe;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    margin: 15px;
    height: 30px;
    width: 500px;
    max-width: 100%;
}

.progress {
    background: #ad5389;
    background: -webkit-linear-gradient(to bottom, #3c1053, #ad5389);
    background: linear-gradient(to bottom, #3c1053, #ad5389);
    border-radius: 3px;
    height: 30px;
    width: 0;
    transition: width 0.5s ease-in;
}

Quelques points à noter concernant le CSS ci-dessus :

  1. les deux éléments sont des rectangles qui ont la même hauteur (30px) et le même border-radius
  2. initialement, la largeur de .progress est définie sur 0 et nous mettrons cela à jour dans le code JavaScript ci-dessous
  3. également, .progress a un beau linear-gradient de uiGradients
  4. la transition ajoutée à .progress est utilisée pour créer une belle animation lorsque la valeur de son attribut data-size est modifiée dynamiquement

Le JavaScript

Pour cela, nous devons parcourir tous les éléments .progress (dans notre exemple, il n'y en a qu'un seul, mais vous pouvez en ajouter plusieurs dans une application) pour obtenir leur valeur data-set et la définir comme leur largeur. Nous utiliserons le pourcentage (%) dans ce cas.

const progress_bars = document.querySelectorAll('.progress');

progress_bars.forEach(bar => {
    const { size } = bar.dataset;
    bar.style.width = `${size}%`;
});

Nous utilisons un peu de Destructuration d'objet.

const { size } = bar.dataset

est la même chose que :

const size = bar.dataset.size

mais vous le saviez peut-être déjà ?.

Conclusion

Il y a plusieurs choses que vous pourriez faire pour améliorer ce composant. Certaines d'entre elles sont :

  1. Ajouter plusieurs variantes de couleur via différentes classes
  2. Ajouter la valeur en pourcentage
  3. Le faire animer dynamiquement en changeant la valeur de la taille.

J'espère que vous avez apprécié et assurez-vous de partager avec moi ce que vous créez !

Bon codage ! ?