Как создать панель прогресса с цветом перевернутого текста для "продвинутой" части

Я пробовал это с часами, но я не получаю никакого решения, которое работает. Задача: создать индикатор прогресса с динамической шириной и центрированной меткой, которая изменяет цвет текста между прогрессивной и непрогретой частью. Вот изображение для уточнения:

Example

Итак, это отлично работает, если я знаю ширину всей панели прогресса. Но он не может использоваться в гибкой конструкции, где ширина вычисляется автоматически.

Вот мой код:

<div class="progress" style="width: 400px;">
 <div class="progressValue" style="width: 50%">
  <div class="progressInnerLabel" style="width: 400px;">I'm a progress text</div>
 </div>
 <div class="progressLabel">I'm a progress text</div>
</div>

И мой CSS:

.progress {
    position: relative;
}

.progressValue {
    overflow: hidden;
    position: absolute;
    height: 20px;
    background-color: blue;    
}

.progressInnerLabel {
    position: absolute;
    text-align: center; 
    color: white;  
    height: 20px;    
}

.progressLabel {
    background-color: #eee; 
    text-align: center; 
    color: black;    
}

Я также создал скрипку, поэтому вы можете поиграть с ней: http://jsfiddle.net/Q82kF/2/

Я хотел бы удалить ширину: 400px моего первого div (class= progress) моего html, поэтому прогресс автоматически получит полную доступную ширину. У кого-нибудь есть решение для этого?

Я НЕ WAND, чтобы сделать это с помощью javascript (или любой lib). Я думаю, что должно быть только решение CSS/HTML.

Ответы

Ответ 1

Я не считаю, что это возможно в чистом CSS, потому что текст внутри заполненной части панели должен быть на уровне 100% от его родительской ширины. Один из вариантов может заключаться в использовании маскирования веб-кары, но, конечно же, он будет работать только в Chrome и Safari.

Я знаю, что вы сказали, что не хотите решения JS, но это единственный способ, о котором я мог думать. Вот как вы это сделаете с помощью jQuery: http://jsfiddle.net/kthornbloom/zkL29/

CSS

.progress-bar {
    background:#ccc;
    padding:10px 0;
    width:100%;
    text-align:center;
    position:relative;
}

.progress-fill {
    background:blue;
    color:#fff;
    width:50%;
    padding:10px 0;
    position:absolute;
    left:0;
    top:0;
    overflow:hidden;
}

JS:

function barWidth() {
    var barWidth = $('.progress-bar').width();
    $('.progress-fill-text').css('width',barWidth);
}
barWidth();
window.onresize = function() {
    barWidth();
}