Progress Bar Generator
Créez des barres de progression CSS personnalisées avec aperçu en direct. Choisissez style, couleurs, rayon et exportez HTML + CSS.
① Définissez le pourcentage et choisissez un style ② Ajustez couleurs et hauteur ③ Copiez le CSS et le HTML
#C9B89A
#2A2A2A
Preview
Output
/* CSS */
.progress-wrap {
background: #2a2a2a;
border-radius: 999px;
height: 20px;
overflow: hidden;
position: relative;
}
.progress-bar {
width: 65%;
height: 100%;
border-radius: 999px;
transition: width 0.3s;
background: #c9b89a;
}
/* HTML */
<div class="progress-wrap">
<div class="progress-bar"></div>
</div>Qu'est-ce qu'une barre de progression CSS?
Une barre de progression CSS est un composant UI qui représente visuellement l'avancement d'une tâche. Construite en HTML et CSS purs, elle ne nécessite pas de JavaScript pour l'affichage statique. Le wrapper externe fournit la piste (fond), tandis que le div interne se remplit proportionnellement via width: {pourcentage}%. Les barres striées utilisent repeating-linear-gradient à 45 degrés. Les barres animées appliquent une animation background-position pour simuler le mouvement.
Questions fréquentes
Une barre de progression CSS est un composant visuel composé de deux divs imbriqués: un wrapper (la piste) et une barre interne dont la largeur en pourcentage reflète la complétion.
Les rayures utilisent repeating-linear-gradient à 45 degrés en alternant la couleur de la barre et une variante semi-transparente tous les 10px.
Les deux utilisent le même pattern repeating-linear-gradient. La version animée applique en plus une animation background-position qui déplace le dégradé horizontalement.
Le wrapper doit être défini à width: 100% pour remplir son conteneur. La barre interne utilise une largeur en pourcentage toujours relative au wrapper.
Oui. Définissez une propriété CSS personnalisée comme --progress et mettez-la à jour via element.style.setProperty("--progress", value + "%").
Les barres arrondies (border-radius: 999px) conviennent aux interfaces modernes. Les coins nets (0) s'adaptent aux tableaux de bord géométriques.
Oui. Utilisez l'élément HTML natif <progress> pour la sémantique, ou ajoutez role='progressbar' aria-valuenow aria-valuemin aria-valuemax au div wrapper.