如何为“已进行”部分创建带有反转文本颜色的进度条

Question

我从几个小时就开始尝试它，但我没有得到任何有效的解决方案。任务是：创建一个具有动态宽度和居中标签的进度条，在进度和未进度部分之间更改其文本颜色。这是一张图片以供澄清：

如果我知道整个进度条的宽度，这很有效。但它不适用于响应式设计，因为它的宽度是自动计算的。

这是我的代码：

<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/

我想删除我的 html 的第一个 div（class= 进度）的宽度：400px，因此进度会自动获得完整的可用宽度。有人对此有解决方案吗？

我不想用 javascript（或任何库）来做。我认为必须有一个仅 CSS/HTML 的解决方案。

Answer 1

这可以通过使用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>

Answer 2

我不相信在纯 CSS 中这是可能的，因为条形填充部分内的文本需要是其父级父级宽度的 100%。一种选择可能是使用webkit masking，但当然它只能在 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();
}