CSS no Lanche

Você por um acaso alguma vez já tentou desenvolver uma barra de progresso e não obteve sucesso como queria? Hoje acabei encontrando uma maneira muito simples e funcional de se obter resultados satisfatórios de barra de progresso com CSS no site de Ben Ogle’s.

Basicamente você deve fazer o uso de três divs: uma div que atuará como container, outra que será a cor do progresso e a última para o seu texto. Tanto a div container quanto a div com o progresso devem conter uma imagem de fundo. A imagem utilizada é uam png transparente para que seja mostrada a cor de fundo da div.

HTML

A estrutura do HTML é muito simples:

<div class="meter-wrap">
    <div class="meter-value" style="background-color: #0a0; width: 40%;">
        <div class="meter-text">
            Texto aqui!
        </div>
    </div>
</div>

Observe o atributo style. A cor definida é a cor da barra de progresso bem como a largura deve ser definida em porcentagem.

CSS

.meter-wrap{
    position: relative;
}

.meter-wrap, .meter-value, .meter-text {
    /* Altura e largura de sua imagem */
    width: 155px; height: 30px;
}

.meter-wrap, .meter-value {
    background: #bdbdbd url(/path/to/your-image.png) top left no-repeat;
}

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

Imagem

Observe agora a imagem utilizada no exemplo, ela foi coloca em um fundo colorido para que você possa notar os cantos da imagem:

Vejam agora o exemplo funcional de barra de progresso com CSS.