¿Conoces NextGameGen?

Si quieres viciarte un rato, haz click aquí

Esta tarde he estado trabajando en la página de mecanografía.

El caso es que he perdido muchísimo tiempo para realizar una tarea que en principio parece una chorrada.

Quería hacer una barra de progreso normal y corriente, con un color de fondo, el borde en negro (de un pixel de grosor) y el texto que yo eligiera en el centro.

El problema, como siempre ha venido con la incompatibilidad de los navegadores. Lo que funcionaba en Firefox no funcionaba en Internet Explorer y viceversa. Además también funciona de categoría para Opera.

Finalmente, tras muchos intentos de prueba y error, he conseguido lo que quería. A continuación se puede ver el resultado:

Barra de progresos

Para los interesados, pinchad aquí para ver el ejemplo de la barra de progresos. Si mirais el código fuente vereis lo sencillito que se ha quedado al final.

Nota: Al final he perdido casi más tiempo tratando de poner la barra de progresos en este artículo (WordPress no me deja poner HTML en plano) que programando la barra de progresos. Finalmente he optado por pasar olímpicamente de poner el ejemplo HTML embedido en este artículo y he puesto la imagen.

Actualización: acabo de leer un artículo bastante completo sobre otras soluciones para dibujar barras de progreso y gráficos. Muy interesante :)

6 Responses to “Barra de progreso en HTML y CSS”

  1. Barra de progreso en HTML y CSS…

    Vota este post en teknear.com…

    January 10th, 2008 | 5:17 pm
  2. hernan

    gracias me funciono muy bien

    November 23rd, 2009 | 11:08 pm
  3. Hola, cuando uso la barra en IExplorer se va al centro, como puedo decirle que se ubique a la izquierda.

    Gracias.

    January 21st, 2011 | 7:14 pm
  4. @Renzo supongo que si haces un div container posicionado donde quieres, seguramente no habrá problemas… pero tendría que probarlo.

    February 21st, 2011 | 11:01 pm
  5. […] http://www.pausanchez.com/es/2007/11/26/barra-de-progreso-en-html-y-css/ Esta entrada fue publicada en PHP por dario. Guarda el enlace permanente. […]

    August 1st, 2013 | 2:21 am
  6. August 19th, 2013 | 5:20 am

Leave a Reply