html Barre de progression en HTML

Hamza

Membre
Bonjour,

Je voudrais faire une sorte de barre de progression pour visualiser des dons par rapport à un objectif.
À la base je me suis dit que je pouvais faire un bloc plat et allongé et utiliser la bordure de gauche pour imiter la barre de progression:
HTML
<div class="barre-dons">
    &nbsp;
</div>
CSS
.barre-dons {
    width: 90px;
    max-height: 10px;
    border: 1px solid red;
    border-left: 10px solid red;
}
Dans ce cas cela représenterait une barre de progression de 10% : largeur totale du bloc (width 90px + border 10px = 100px)
En ajustant à chaque fois la largeur de bordure et en rétrécissant d'autant la largeur du block cela fait le job.

Bon... C'est un peu bricolé.
Que feriez-vous ? (pas de JS please !)
 
  Solution
Mais carrément ! en plus ça prend pas beaucoup de code, pourquoi ne pas rester comme ça ?
Si j'avais du réfléchir à une barre de progression j'aurais pas fait autrement je pense, c'est simple et efficace.

Je ne sais pas si HTML propose un truc clé en main comme les formulaires ou les tableaux...
 

Cascadeur

Membre

WWWest

Membre
D'autant plus, Hamza, toi qui cherches des infos sur l'accessibilité ta barre de progression bricolée ne sera qu'un vulgaire bloc pour les navigateurs tandis qu'avec la fonction progress ce sera lu comme un barre de progression et donc retranscrite de la sorte pour les malvoyants.

Les robots également pourront détecter une barre de progression et non un bloc.
Le bricolage c'est bien, et tu as plutôt bien fait les choses avec tes moyens, mais ça a ses limites.
 

Eleven Up

Membre
L'inspecteur Chrome donne ça sur le <progress> du code plus haut
CSS
progress {
    -webkit-writing-mode: horizontal-tb !important;
    appearance: auto;
    box-sizing: border-box;
    display: inline-block;
    height: 1em;
    width: 10em;
    vertical-align: -0.2em;
}

On peut facilement jouer avec width et height mais je n'ai pas réussi à changer la couleur de la progression bleue.
CSS
#file {
    color: red; /* aucun effet sur la barre de progression */
}

#file {
    background: red; /* effet bizarre, la barre devient grise et verte un peu à l'ancienne */
}
 

WWWest

Membre
Hello, je vous recommande cette page pour styliser une barre de progression HTML

@7UP tu utilises l'ID au lieu de l'élément lui-même pour ton CSS.
Pour appliquer du CSS au conteneur de la barre de progression on utilise
CSS
progress[value]::-webkit-progress-bar {
/* ton css ici */
}
Et pour appliquer du CSS à la barre de valeur
CSS
progress[value]::-webkit-progress-value {
/* ton css ici */
}
 

Cascadeur

Membre
Toujours pas compris à quoi peut servir le texte entre les deux balises...
Effectivement, je ne vous pas trop à quoi cela peut servir.

Pour revenir sur <meter> il y a un avantage c'est le fait de pouvoir colorer la barre de valeur selon les valeurs LOW, HIGH et OPTIMUM.
HTML
<meter id="fuel"
    min="0" max="100"
    low="33" high="66" optimum="80"
    value="7">
</meter>
Jusqu'à 33 la couleur est rouge, entre 34 et 66 orange, au dessus de 66 vert ! (y)
 

Hamza

Membre
Du coup je ne sais plus trop quoi utiliser, il y a pléthore de possibilités.
<meter> est bien pour les niveaux colorés, visuellement ça parle, rouge/orange/vert tout le monde connait.

Avec <progress> on peut vraiment personnaliser la barre de progression dans tous les sens.
 

Ces discussions pourraient vous intéresser...

  • Résolue
Salut, J'ai une erreur PHP que je n'arrive pas à résoudre, voici le code simplifié <!DOCTYPE html> <html> <head> <title>Cours PHP & MySQL</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Titre</h1>...
J'ai un petit souci avec l'examen Page speed de Google qui obtient un mauvais résultat à cause de ressources JavaScript qui bloquent le rendu. Donc dans mon cas, il y a bien un script JS qui est appelé dans le header de mon fichier HTML. J'ai tenté de faire un defer puis un async mais le...
  • Résolue
Yo ! J'ai une div sans bordure remplie de cellules horizontales auxquelles j'applique une bordure sur le bord bas pour les séparer entre elles. Le problème c'est que la dernière je ne veux pas de bordure basse puisqu'il n'y a plus de cellule sous elle. Je n'ai pas la main sur le HTML parce que...
Haut