How to create a progressbar with inverted text color for "progressed" part

I don't believe it is possible in pure CSS because the text within the filled part of the bar needs to be at 100% of its parent's parent's width. One option may be to use webkit masking, but of course it would only work in Chrome & Safari.

I know you said you didn't want a JS solution, but it's the only method I could think of. Here's how you'd do it with 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();
}

This can be implemented by using clip-path: inset():

.progress {
  position: relative;
  display: flex;
  height: 100px;
  border: 3px solid #566573;
  border-radius: 8px;
  font-size: 50px;
  font-family: Courier, monospace;
  overflow: hidden;
}

.back {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: #5D6D7E;
  color: white;
}

.front {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: white;
  color: black;
  clip-path: inset(0 0 0 50%);
  -webkit-clip-path: inset(0 0 0 50%);
  transition: clip-path 1s linear;
}

<div class="progress">
  <div class="back">progress 100%</div>
  <div class="front">progress 100%</div>
</div>