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

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

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

Вот мой код:

<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