html5htmlcssprogress-bar

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

просмотры: 32.1K
 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 могут появляться на шкале в любом порядке, если я могу сказать, что есть две разные вещи, и «посмотреть», сколько каждая из них занимает.

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

Спасибо.

Источник

Ответов (4)

Решение

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

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, а не внутри).

Источник
<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%');
Источник
<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 */
}

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

Источник

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

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

Редактировать:

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

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

Источник