La barre de progression ( css progress bar ) est un élément important dans le web, la barre de progression peut être utilisée pour le téléchargement, mesurer des compétences, etc. Pour créer une barre de progression, nous pouvons utiliser HTML et CSS. Pour rendre cette barre de progression réactive, vous aurez besoin de JavaScript, ce n’est pas le sujet de cette article mais il n’est pas impossible que j’écris une suite à cette article avec du JavaScript.
Dans cet article, nous allons apprendre à créer des barres de progression en utilisant le HTML et le CSS. Une barre de progression est créée en utilisant deux « div » HTML, la div qui enveloppe la barre de progression ( wrapper ) et la div de progression ( progressbar) comme le montrent les exemples suivants.
Création d'une progress bar css
<h1 class="text-center">Téléchargement</h1>
<div class="container">
<p>video.mp4</p>
<div class="progressbar-wrapper">
<div title="downloaded" class="progressbar mp4">100%</div>
</div>
<p>musique.mp3</p>
<div class="progressbar-wrapper">
<div title="downloading" class="progressbar mp3">60%</div>
</div>
</div>En utilisant le CSS nous allons décorer les deux div par l’intermédiaire de l’attribut aria-label. La longueur de progression sera définit en width par les classes mp4 et mp3.
:root {
--success: #00b894;
--progress: #e17055;
}
.progressbar-wrapper {
background-color: #dfe6e9;
color: white;
border-radius: 15px;
width: 100%;
}
.progressbar {
background-color: var(--progress);
color: white;
padding: 1rem;
text-align: right;
font-size: 20px;
border-radius: 15px;
}
.progressbar[title="downloading"] {
background-color: var(--progress);
}
.progressbar[title="downloaded"] {
background-color: var(--success);
}
.mp4 {
width: 100%;
}
.mp3 {
width: 60%;
}Pourquoi utiliser title ?
Title n’est d’aucune utilité pour une grande partie de la population mais peut être une aide pour une personne souffrant d’un handicap, ces utilisateurs peuvent s’attendre, par exemple, à avoir une info-bulle. À cet égard, l’attribut title peut être utiliser conjointement avec aria-label pour une meilleure prise en charge par les navigateurs et les lecteurs d’écran. Nous faisons d’une pierre deux coup en utilisant le CSS pour mettre en avant lorsqu’une barre de progression est fini.
Une personne utilisant une loupe d’écran ou souffrant d’un trouble de la vue pourra ainsi accéder l’état de progression de la barre de progression via l’info-bulle ou par l’intermédiaire d’un assistant vocal.
Résultat de notre progress bar css
Ici, nous allons combiner les deux sections ci-dessus afin d’obtenir notre barre de progression en CSS et HTML uniquement, vous trouverez le résultat via mon codepen ci-dessous :
