barra progresso

<style type="text/css">
.meter-wrap{
    position: relative;
}

.meter-wrap, .meter-value, .meter-text {
    /* Altura e largura do MAXIMO que pode chegar a barra */

    width: 155px; height: 30px;
}

.meter-wrap, .meter-value {
    background: #000;
}

.meter-text {
    position: absolute;
    top:0;
    left:0;
    padding-top: 5px;
    color: #fff;
    text-align: center;
    width: 100%;
}

</style>

<br>
<div class="meter-wrap">
    <div class="meter-value" style="background-color: #0a0; width: 10%;">
        <div class="meter-text">
            10%
        </div>
    </div>
</div>
<br>
<div class="meter-wrap">
    <div class="meter-value" style="background-color: #0a0; width: 30%;">
        <div class="meter-text">
            30%
        </div>
    </div>
</div>

<br>
<div class="meter-wrap">
    <div class="meter-value" style="background-color: #0a0; width: 50%;">
        <div class="meter-text">
            50%
        </div>
    </div>
</div>

<br>

<div class="meter-wrap">
    <div class="meter-value" style="background-color: #0a0; width: 80%;">
        <div class="meter-text">
            80%
        </div>
    </div>
</div>
<br>
<div class="meter-wrap">
    <div class="meter-value" style="background-color: #0a0; width: 100%;">
        <div class="meter-text">
            100%
        </div>
    </div>
</div>