Индикатор выполнения в HTML / CSS

 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%.

Теперь я хотел бы заполнить ТАКУЮ полосу выполнения двумя разными значениями. Например, если значение A составляет 30%, а значение B - 40%, будет заполнено 70% полосы, но процент каждой из них можно будет увидеть по разнице в цветах. Значения A и B могут появляться на шкале в любом порядке, если я могу сказать, что есть две разные вещи, и «посмотреть», сколько каждая из них занимает.

Какие-либо предложения?

Спасибо.


html css progress-bar
person T.T.T.    schedule 25.02.2009    source источник

Ответы (4)


arrow_upward
12
arrow_downward

Вы ищете что-то подобное?

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:

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

Я не уверен, почему вы используете тег dd (для меня этот тег заставляет div отображаться под тегом dd, а не внутри).

person jennyfofenny    schedule 25.02.2009
comment
да. Спасибо. Это очень чистый способ сделать это. - person T.T.T.; 26.02.2009

arrow_upward
0
arrow_downward

Я предлагаю наложить на него еще одну полосу и при необходимости сдвинуть ее влево / вправо.

Если полосы не должны растягиваться по длине области просмотра, вы можете поместить их в div с overflow: hidden, чтобы иллюзия оставалась нетронутой.

Изменить:

Я просто понял, почему я хотел сделать это именно так, а не следовать тому, что вы начали. Когда я делал что-то подобное раньше, он использовал изображения, где изменение ширины, конечно, исказило наложенное изображение.

Я уверен, что вы можете использовать простые цвета, просто используя размер. Но я бы все равно использовал CSS, чтобы накладывать друг на друга.

person Trevor Bramble    schedule 25.02.2009
comment
Пример? Значения будут меняться каждые несколько минут, поэтому перемещение второго вправо не сработает, если, скажем, первое значение упадет до 5%, мне нужно будет добавить значение B. - person T.T.T.; 26.02.2009

arrow_upward
0
arrow_downward 

<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 */
}

Если вам нужно только одно значение на индикаторе выполнения, есть руководство здесь.

person Cannicide    schedule 12.11.2016

arrow_upward
-1
arrow_downward 

<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%');
person Dalibor    schedule 18.01.2013