Градиент CSS: имитировать индикатор выполнения

Question

Попытка имитировать этот индикатор выполнения с использованием css. Он имеет два фона, и один из фонов должен охватывать только часть панели, за текстом. Ширину нужно легко манипулировать, чтобы изменить%. Я начал с полного бара, но на самом деле не знаю, как добавить к нему процентную часть. Можно ли обойтись без абсолютного позиционирования?

<div class="bar"> 
    Progress: 60% 
</div> 

.bar { 
    border: 1px solid black; 
    color: white; 
    display: table-cell; 
    width: 250px; 
    height: 50px; 
    text-align: center; 
    vertical-align: middle;   
    background: #003458; 
    background: -moz-linear-gradient(top, #003458 0%, #001727 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#003458), color-stop(100%,#001727)); 
    background: -webkit-linear-gradient(top, #003458 0%,#001727 100%); 
    background: -o-linear-gradient(top, #003458 0%,#001727 100%); 
    background: -ms-linear-gradient(top, #003458 0%,#001727 100%); 
    background: linear-gradient(to bottom, #003458 0%,#001727 100%); 
} 

Fiddle

Answer 1

Если вы просто хотите, чтобы осветлить, как показывает ваш пример, наложение 2 градиенты:

.bar { 
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 60%, transparent 60%), 
       linear-gradient(to bottom, #003458 0%,#001727 100%); 
} 

Here is a demo. (Убрано префиксы, вы должны добавить их снова в окончательном коде)

---

Но проблема в том, как вы знаете, как большой бар должен быть? Вы можете создать несколько классов для каждого значения или использовать JavaScript для этого, но, конечно, оба решения не очень хороши. Так как другие говорили: Используйте внутренний элемент:

<div class="bar"> 
    <p>Progress: 60%</p> 
    <span style="width: 60%"></span> 
</div> 

CSS:

.bar { 
    position: relative; 
    border: 1px solid black; 
    color: white; 
    display: block; 
    width: 250px; 
    text-align: center; 
    vertical-align: middle; 
    height: 50px; 
    line-height: 50px; 
    background: linear-gradient(to bottom, #003458 0%,#001727 100%); 
} 

.bar > span { 
    position: absolute; 
    display: block; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    background: rgba(255, 255, 255, 0.1); 
} 

.bar > p { 
    display: inline; 
    position: relative; 
    z-index: 1; 
} 

С, что вы можете стилизовать значение, установив width в атрибут стиля <span/> «s. Btw: Я изменил display: table-cell на block и добавил line-height для вертикального центрирования текста. Это должно работать в этом случае, потому что нет разрыва строки. Кроме того, position: relative ничего не делает на ячейках таблицы.

Here is a demo.