barre de progression CSS/HTML5 verticale

Question

Je cherche à avoir une barre verticale que je peux changer le pourcentage de sorte de comme une barre de pourcentage mais en format vertical, j'ai réussi à obtenir un horizontal à travailler en utilisant ceci: CSS Progress Bar mais maintenant je voudrais l'imiter mais verticalement.

Is there a way that I can do this.

C'est le code de la barre verticale:

<div class="score"> 
<div id="test" class="score-completed" style="height:80;"> 
<div>&nbsp;</div> 
</div> 
</div> 

.score { 
width:34px; 
height:141px; 
background: url(/assets/images/accordion/score.png) no-repeat 0 0px; 
} 
.score-completed { 

width:26px; 
margin-left: -1px; 
background: url(/assets/images/accordion/score.png) no-repeat 1px 0; 
} 
.score-completed div { 
float: right; 
height: 50%; 
width:26px; 
margin:99px 1px 0 0; 
background: url(/assets/images/accordion/score.png) no-repeat 100% 100%; 
display: inline; /* IE 6 double float bug */ 
} 

Answer 1

Je ne vois pas pourquoi vous ne devriez pas construire votre propre - ce qui suit est ma tentative, et n'a pas été testé sur IE, mais il devrait fonctionner pour tous les navigateurs modernes:

#outer { 
    width: 30px; 
    height: 140px; 
    overflow: hidden; 

    position: relative; 
} 

#inner, #inner div { 
    width: 100%; 
    overflow: hidden; 
    position: absolute; 
} 

#inner { 
    bottom: 0; 
    height: 0%; 
} 

#inner div { 
    top: 0; 
    width: 100%; 
    height: 5px; 
} 

L'idée de base ici est d'utiliser div positionnés de façon absolue pour déplacer chaque élément de la barre en position - le plus interne div pour la partie supérieure pour obtenir le sommet rond, positionné au sommet de la barre de progression avec top: 0, tandis que le barre de progression elle-même est aligné en bas avec bottom: 0.

J'ai mis en place une démo simple ici: http://www.jsfiddle.net/sNLXn/. La démo utilise la bordure et l'arrière-plan pour montrer la barre de progression, mais la vraie chose devrait utiliser des images à la place.

Answer 2

Je ne sais pas si c'est ce dont vous avez besoin, mais:

Vous pouvez modifier la hauteur de la règle css .score-completed div de pourcentage (actuellement 50%) à hauteur fixe avec px (pour cet exemple 40px). Ensuite, lorsque vous devez agrandir la barre verte, vous pouvez ajouter des pixels dans la hauteur et supprimer la même quantité de pixels de la marge (actuellement 99px). Par exemple, si vous voulez que la hauteur soit 49px, alors la marge doit être de 90px (-9 pixels parce que vous avez ajouté en hauteur)

Edit: vous pouvez ajouter un ID à chaque div avec la barre, puis créer une règle CSS.

Par exemple:

<div class="score"> 
<div id="test" class="score-completed" style="height:80;"> 
<div id="first">&nbsp;</div> 
</div> 
</div> 
<div class="score"> 
<div id="test" class="score-completed" style="height:80;"> 
<div id="second">&nbsp;</div> 
</div> 
</div> 

Ensuite, vous enlevez la hauteur et de la marge: 99px de votre .score-completed div et de créer de nouvelles règles CSS pour chaque barre par exemple:

#first {margin:99px 1px 0 0; height:40px; } 
#second {margin:90px 1px 0 0; height:49px; }