Barre de progression avec HTML et CSS

Question

Je veux créer une barre de progression comme dans l'image ci-dessous :

Je n'ai aucune idée de la façon de créer ceci. Devrais-je utiliser des techniques HTML5 ?

Pourriez-vous m'aider à créer cette barre de progression ?

Answer 1

#progressbar {
  background-color: black;
  border-radius: 13px;
  /* (height of inner div) / 2 + padding */
  padding: 3px;
}

#progressbar>div {
  background-color: orange;
  width: 40%;
  /* Adjust with JavaScript */
  height: 20px;
  border-radius: 10px;
}

<div id="progressbar">
  <div></div>
</div>

Violon

(MODIFICATION : modification de la surbrillance syntaxique ; remplacement du sélecteur descendant par le sélecteur enfant)

Answer 2

http://jsfiddle.net/cwZSW/1406/

#progress {
    background: #333;
    border-radius: 13px;
    height: 20px;
    width: 300px;
    padding: 3px;
}

#progress:after {
    content: '';
    display: block;
    background: orange;
    width: 50%;
    height: 100%;
    border-radius: 9px;
}

<div id="progress"></div>

Answer 3

J'aime bien celui-là :

• Article
• Démo
• Téléchargements

très astucieux, avec seulement ceci en HTML et le reste en CSS3, qui est rétrocompatible (bien qu'il y ait moins de plaisir pour les yeux).

Modifier Ajouté le code ci-dessous, mais pris directement de la page ci-dessus, tout le crédit à cet auteur

.meter {
  height: 20px;
  /* Can be anything */
  position: relative;
  background: #555;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  padding: 10px;
  -webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
  -moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}

.meter>span {
  display: block;
  height: 100%;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-radius-topright: 8px;
  -moz-border-radius-bottomright: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  -webkit-border-top-left-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: #f1a165;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1a165), color-stop(1, #f36d0a));
  background-image: -webkit-linear-gradient(top, #f1a165, #f36d0a);
  background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
  background-image: -ms-linear-gradient(top, #f1a165, #f36d0a);
  background-image: -o-linear-gradient(top, #f1a165, #f36d0a);
  -webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}

<div class="meter">
  <span style="width: 33%"></span>
  <!-- I use my viewmodel in MVC to calculate the progress and then use @Model.progress to place it in my HTML with Razor -->
</div>

Answer 4

Créez un élément qui montre la partie gauche de la barre (la partie ronde), créez également un élément pour la partie droite. Pour la barre de progression réelle, créez un troisième élément avec un arrière-plan répétitif et une largeur qui dépend de la progression réelle. Placez le tout au-dessus de l'image d'arrière-plan (contenant la barre de progression vide).

Mais je suppose que vous le saviez déjà...

Modifier : Lorsque vous créez une barre de progression qui n'utilise pas d'arrière-plan textuel. Vous pouvez utiliser l'option border-radius pour obtenir l'effet rond, comme le montre Rikudo Sennin y RoToRa !

Answer 5

voir et apprendre
Barre de progression en HTML / CSS
http://blog.benogle.com/2009/06/16/simple-css-shiny-progress-bar-technique/