Barras de progreso con CSS

Escrito por J.F. el Monday, 31 de March del 2008 a las 17:42

Interesante forma de incorporar a nuestra página web una barra de progreso, simplemente mediante CSS y un gif animado. El código es muy sencillo, simplemente hemos de tener presente que el ancho máximo serían 200px, por tanto si queremos un 50%, tendríamos que darle al elemento un ancho de 100px en el atributo style. Con un ejemplo se ve claramente:

TEXTO PLANO

HTML:

1. <p class="progressBar">
2. <span>
3. <em style="left: 100px">50%</em>
4. </span>
5. </p>

Se puede conseguir el mismo ejemplo utilizando algún tipo de lista, como ésta que propone el autor:

TEXTO PLANO

HTML:

1. <dd>
2. <span>
3. <em style="left: 100px">50%</em>
4. </span>
5. </dd>

El código CSS incluido por el autor en el ejemplo que se puede descargar desde su página es la siguiente:

TEXTO PLANO

CSS:

1. dl, dt, dd{margin:0;padding:0;}
2.  
3. dd{
4. width:216px;
5. height:41px;
6. background:url(bg_bar.gif) no-repeat 0 0;
7. position:relative;
8. }
9. dd span{
10. position:absolute;
11. display:block;
12. width:200px;
13. height:25px;
14. background:url(bar.gif) no-repeat 0 0;
15. top:8px;
16. left:8px;
17. overflow:hidden;
18. text-indent:-8000px;
19. }
20. dd em{
21. position:absolute;
22. display:block;
23. width:200px;
24. height:25px;
25. background:url(bg_cover.gif) repeat-x;
26. top:0;
27. }
28.  
29. /* SINGLE PROGRESS BAR */
30.  
31. .progressBar{
32. width:216px;
33. height:41px;
34. background:url(bg_bar.gif) no-repeat 0 0;
35. position:relative;
36. }
37. .progressBar span{
38. position:absolute;
39. display:block;
40. width:200px;
41. height:25px;
42. background:url(bar.gif) no-repeat 0 0;
43. top:8px;
44. left:8px;
45. overflow:hidden;
46. text-indent:-8000px;
47. }
48. .progressBar em{
49. position:absolute;
50. display:block;
51. width:200px;
52. height:25px;
53. background:url(bg_cover.gif) repeat-x 0 0;
54. top:0;
55. }

Para más información, y ver más claro su uso no dudes en ver la demo o descargarte el archivo de ejemplo.

Comentarios (1)

Categoria: CSS,Recursos

• Añadir este post a
• Del.icio.us -
• Meneame -
• Digg -
• Webeame

Entradas relacionadas

Nombre (obligado)

E-mail (no sera publicado) (obligado)

Pagina web

Puedes usar las siguientes etiquetas HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>