Progress Bar text colors

by kthornbloom

HTML

<div class="progress-bar">
    <div class="progress-fill">
        <div class="progress-fill-text">Here is text</div>
    </div>
    Here is text
</div>

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;
}

.progress-fill-text {
}

JavaScript

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