Demonstração 

Usando uma lista de definição (dl, dt e dd)

80% não utilizam CSS para formatar e estilizar documentos Web

80%

10% utilizam exclusivamente CSS para formatar e estilizar

10%

50% utilizam CSS e HTML

50%

25% gostariam de passar a utilizar.

25%

Barra de Progresso CSS

Esta é uma simples demonstração (para não dizer truque) de como você pode criar uma barra animada de progressão utilizando exclusivamente css e um "gif" animado. O truque é muito simples. Precisamos de 3 elementos: 1 recipiente e 2 elementos aninhados.

O Conceito

Primeiro iremos colocar uma imagem legal na "div" recipiente e definir uma largura e altura fixos. O primeiro elemento filho (SPAN) vai atuar como uma barra de progresso. Nós posicionaremos o segundo elemento filho (EM) acima da barra de progresso e a deslocaremos para a esquerda atribuindo-lhe o valor que entendermos desejável. O elemento filho EM terá o mesmo background que o recipiente e isso produz o efeito de progresso da barra parando em uma determinada porcentagem.

Marcação

Para individualizar determinado elemento, na medida do possível, usaremos a marcação de lista de definição (DL) quando trabalharmos com diversos valores. Para uma única barra de progresso podemos utilizar qualquer elemento que desejarmos. Em nosso exemplo utilizaremos a marcação P (parágrafo).

<dd>
	<span><em style="left:100px">50%</em></span>
</dd>

Vamos utilizar estilos inline para posicionamento do elemento esquerdo "EM". É conveniente definir ambos valores em um único lugar.

Animação

Como é feita? Usando um gif animado, naturalmente. O elemento SPAN tem uma largura de 200px que abrigará o gif animado e que partirá de de "zero" para 200px. Podemos definir qualquer porcentagem, desde que observada a proporção respectiva, como explicado acima: utilizaremos o EM para determinar o fim da animação.

Local do EM

Em nosso exemplo nós utilizamos 200 pixels de largura para a barra de progresso. O elemento "EM" também tem 200px de largura. Assim, cada percentual corresponde a 2px de largura. Se quisermos mudar os percentuais precisaremos, tão somente, multiplicar a porcentagem a ser exibida por 2 (esta deverá ser a largura de "EM"), por exemplo, 50% corresponderá a 100px, 24% corresponderá 48px e etc.

Tutorial reproduzido com alterações, do site cssglobe.com ver original.

Publicado originalmente em: Css Globe