Construindo uma barra de progresso

Construindo uma barra de progresso

Muitas pessoas já buscaram ou buscam (Assim como foi comigo) por desenvolver uma barra de progresso e não obteve sucesso como queria. Esta excelente ferramenta é um pouco difícil de se encontrar, mas agora não será mais, pois agora voce terá uma maneira muito simples e funcional de se obter resultados satisfatórios de barra de progresso apenas com CSS  e HTML.

Voce terá dois passos principais, um para incluir o CSS dentro do código fonte do blog e a partir de então, voce poderá colocar o código HTML em qualquer lugar de seu blog que terá este efeito.
A imagem utilizada deverá ser uma png transparente para que seja mostrada a cor de fundo da div na área que voce deseja.

1º Inserindo o CSS.

Primeiramente voce deverá inserir o código CSS que irá fazer todo o trabalho. Ente em seu blog,  vá em DESIGN -> EDITAR HTML e então procure pela tag:

Então bem acima dela insira o seguinte código:
.meter-wrap{
position: relative;
}
.meter-wrap, .meter-value, .meter-text {
/* Altura e largura de sua imagem */
width: 208px; height: 115px;
}

.meter-wrap, .meter-value {
background: #f48c17 url(http:ENDEREÇO-DA-IMAGEM.png) top left no-repeat;
}
.meter-text {
position: absolute;
top:0;
left:0;
padding-top: 5px;
color: #fff;
text-align: center;
width: 100%;
}

ENDEREÇO-DA-IMAGEM: Este será o endereço da sua imagem, caso queira usar a imagm do final deste artigo use: http://1.bp.blogspot.com/-Puho-8GCKtU/Tc6nT1pHDpI/AAAAAAAAAI0/Rn_gZL4SDp4/s1600/barra-de-progresso.png

Observe o atributo style. A cor definida (background) é a cor da barra de progresso bem como a largura deve ser definida em porcentagem na propriedade width.

2º Inserindo o HTML em qualquer lugar.

Bom, após inserir o CSS agora basta voce inserir o código html abaixo em qualquer lugar do seu blog, pode ser dentro de um widget ou dentro de uma postagem, o código é este abaixo:

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

Observe aqui os atributos width: 40% e coloque aqui seu texto, referen-se ha porcentagem que a barra irá ter e o texto que irá aparecer dentro da barra de progresso respectivamente.

3ª Definição da imagem.

Bom como dito anteriormente a imagem deve ser PNG, e onde não tiver fundo será preenchido pelo progresso da barra, caso queira poderá utilizar a imagem abaixo criada pelo blog, então pode utilizar tranquilamente, e mais abaixo tem um exemplo desta barra em funcionamento.





 (Coloquei o fundo da imagem em azul para voce perceber como a imagem deve ser, contendo um espaço transparente)



EXEMPLO EM FUNCIONAMENTO:



40%

75%