プログレスバー

Question

dd { 
    /*position: relative; /* IE is dumb */ 
    display: block;     
    float: left;  
    width: 500px; 
    height: 16px; 
    margin: 0 0 2px; 
    background: url("white3.gif"); 
} 

dd div.blue { 
    /*position: relative; */ 
    background: url("blue.gif"); 
    height: 16px; 
    width: 75%; 
    text-align:right; 
    display:block; 
} 

HTML：

<dd> 
    <div class="blue" style="width:35%;"> 
</dd> 

これは、白いバーを作成し、青色の35％でそれを埋めます。

これで、SAME進行状況バーに2つの異なる値を入力したいと思います。たとえば、値Aが30％、値Bが40％の場合、バーの70％は塗りつぶされますが、色の違いによってそれぞれの割合が分かります。値AとBは、2つの異なる物があり、それぞれの物がどのくらい持ち上がっているかを「見る」ことができる限り、バー上の任意の順序で来ることができます。

提案がありますか？

ありがとうございました。

Answer 1

このようなものをお探しですか？

はCSS：

は

div.dd { 
    /*position: relative; /* IE is dumb */ 
    display: block;     
    float: left;  
    width: 500px; 
    height: 16px; 
    margin: 0 0 2px; 
    background: #fff; 
} 

div.dd div.blue { 
    /*position: relative; */ 
    background: #00f; 
    height: 16px; 
    width: 75%; 
    text-align:right; 
    display:block; 
    float: left; 
} 
div.dd div.red { 
    /*position: relative; */ 
    background: #f00; 
    height: 16px; 
    width: 75%; 
    text-align:right; 
    display:block; 
    float: left; 
} 

HTML：私はあなたが私のために（DDタグを使用している理由はわからない

<div class="dd"> 
    <div class="blue" style="width:35%;"></div> 
    <div class="red" style="width:10%;"></div> 
</div> 

は、このタグは、ddタグの下にレンダリングするdivを引き起こし、内部ではなく）。

Answer 2

別のバーを重ねて、必要に応じて左右に移動することをおすすめします。

バーがビューポートの長さを伸ばすことになっていない場合は、錯視をそのままにするためにoverflow：hiddenを使用してdivに配置できます。

編集：

私はちょうど私がそのようにやってみたかった理由を考え出した、あなたが始めたいものをフォローません。私が前に似たようなことをしたとき、画像を使っていました。そこでは、幅を変更すると、重ね合わせた画像が乱されました。

単なる色で、私はあなたがちょうどサイズを使用することで逃げることができると確信しています。でも、私はまだCSSを使ってレイヤーを重ねています。

Answer 3

<div style="height: 5px; background-color: green; width: 100%;"> 
    <div id="progress_bar" style="height: 5px; background-color: red; width: 10%;"></div> 
</div> 

その後：

$('#progress_bar').css('width', '30%'); 

Answer 4

<div class="progressbar"> 
    <div class="inner1" style="width: 30%; background-color: blue;"><b>Value A</b></div> 
    <div class="inner2" style="width: 40%; background-color: red;"><b>Value B</b></div> 
</div> 

次にCSS：

.progressbar { 
    background-color: #1e1e1e; 
    color: white; 
    height: 25px; 
    width: 115px; 
} 
.inner1, .inner2 { 
    height: 100%; 
    /* Change width with javascript */ 
} 

あなただけのプログレスバーで一つの値をしたい場合は、チュートリアルhereがあります。