如何在栏填充时更改引导进度条文本颜色

Question

我有一个bootstrap进度条，我根据我正在进行的百分比计算动态填充。我在进度条div中也有一个span元素。 我的代码看起来像这样：

<div class="progress progress-striped active">
   <div class="progress-bar progress-bar-striped" id="progress12"
        role="progressbar" aria-valuemin="0" style="width:50%"></div>
   <span class="progressText">progresstext</span>
</div>

我的css：

.progressText {
    position: inherit;
}

因此，当进度条填充50％时，我希望一半的文本是一种颜色而另一半不是填充的另一种颜色。

有什么方法可以在进度条更新时动态更改文本的颜色吗？