Barra de progresso com CSS

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 é uma png transparente para que seja mostrada a cor de fundo da div.

HTML

A estrutura do HTML é muito simples:

1.<div>
2.    <div style=”background-color: #0a0; width: 40%;”>
3.        <div>
4.            Texto aqui!
5.        </div>
6.    </div>
7.</div>

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

CSS

01..meter-wrap{
02.    position: relative;
03.}
04.
05..meter-wrap, .meter-value, .meter-text {
06.    /* Altura e largura de sua imagem */
07.    width: 155px; height: 30px;
08.}
09.
10..meter-wrap, .meter-value {
11.    background: #bdbdbd url(/path/to/your-image.png) top left no-repeat;
12.}
13.
14..meter-text {
15.    position: absolute;
16.    top:0;
17.    left:0;
18.    padding-top: 5px;
19.    color: #fff;
20.    text-align: center;
21.    width: 100%;
22.}

Imagem

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

Barra de progresso

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

Fonte

Anúncios

Deixe um comentário

Arquivado em CSS . Cascading Style Sheets

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s