Собрал из исходников , подогнал под себя кое какие вещи , всё работает .
Но я так понимаю нужно сделать наложение маски ?? фишка такая .
Прогресс заполняется блю цветом , текст белый .. но когда прогресс на 0% или 10% То текст видно на половину , так как он сливается с задним фоном .

<style>
body {
font: .8em Arial,sans-serif;
color: #000;
}

.progress-bar {
        background-color: white;
        height: 43px;
        padding: 1px;
         
        margin: 20px 0;
        border: 1px solid #ccc;
        -moz-border-radius: 5px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
}
 
.progress-bar span {
        display: inline-block;
        height: 100%;
        -moz-border-radius: 1px;
        -webkit-border-radius: 1px;
        border-radius: 1px;
        -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        -webkit-transition: width .4s ease-in-out;
        -moz-transition: width .4s ease-in-out;
        -ms-transition: width .4s ease-in-out;
        -o-transition: width .4s ease-in-out;
        transition: width .4s ease-in-out;
}

.blue span {
        background: linear-gradient(#7393cb,#4b70af);
        background-image: linear-gradient(rgb(115, 147, 203), rgb(75, 112, 175));
}
 

.text_bar{
    padding-left: 10px;
    color: white;
    font: 700 1em/43px Arial,sans-serif;
}
</style>

<div class="progress-bar blue stripes">
    <span style="width: 80%"><div class="text_bar">80% Занято</div></span>
</div>

Как сделать , чтобы на белом фоне было чёрным или другим цветом , цветом как сама шкала ..
Забыл сказать что и буквы уезжают вниз ..