Aviso de carga sólo con CSS. | Oloblogger Las cosas casi siempre se pueden simplificar y esto es precisamente lo que ha hecho José GDF , con el script de aviso para la carga de una p...

22 de febrero de 2010

Aviso de carga sólo con CSS.

Las cosas casi siempre se pueden simplificar y esto es precisamente lo que ha hecho José GDF, con el script de aviso para la carga de una página. Nos lo hizo saber a través de este comentario.

Image Hosted by ImageShack.usImage Hosted by ImageShack.usImage Hosted by ImageShack.usImage Hosted by ImageShack.us


La idea es más o menos la misma que se comentó en su momento, pero ahora sólo utilizaremos CSS. Cómo el código se va cargando por el orden en que está escrito, lo que haremos en esta ocasión será cargar primero de todo una capa con el aviso y justo al final del código (cuando se haya cargado todo), la hacemos invisible.

Para ello, justo después de <body> insertaremos el código de la capa:

<!-- DIV AVISO -->
<div id='aviso' style='text-align:center;margin:0px auto;position:absolute;left:20px;top:80px;width:136px;background-color:#eeeeee;border:1px #000000 solid;padding:5px;'>
<img style='display:block;margin:0px auto;' src='http://img38.imageshack.us/img38/8775/ajaxloader2h.gif'/>
<span style='font-family:Verdana;font-size:10px;font-weight:bold;color:#990000;'>Cargando datos.</span>
</div>

Este es sólo un ejemplo y vuestra creatividad es la que decidirá qué poner dentro del DIV. Lo único imprescindible es que tenga un ID (en el ejemplo aviso) y que lo recordemos, porque es el que necesitaremos a continuación.

Como decíamos, ahora al final del código colocamos estilo CSS para para que el anterior ID se vuelva no-visible. Por tanto, justo antes de </body>, tenemos que insertar:

<style type='text/css'>
#aviso {
visibility:hidden;
display:none;
}
</style>


Y eso es todo. Gracias José GDF.

Bonus: Ajaxload. Una aplicación online para diseñar tus propios iconos animados de carga.

Actualización: Loader Generator. Otra aplicación para crear cargadores que en este caso nos chiva Rodry D.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

21 comentarios :

  1. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  2. Hola oloman! ya conocia esa pagina. te dejo esta que me gusta mas: Load info - gif generator

    ResponderEliminar
  3. uuoooo!! justo lo que buscaba! thx a Jose!!

    ResponderEliminar
  4. Hola Olomán:
    Acudo a este rincón guiado de la mano de un amigo; http://antoniomartnortiz.blogspot.com/

    Mi blog: extremeoencataluablogspot.com

    Soy un "zote" en informática y acudo a ti porque tengo un problema.

    Tengo grabadas en audio "Goear" varias poesías, de pronto, sin saber por qué, cada vez que entro en mi blog se me disparan todos los audios a la vez pareciendo un verdadero gallinero.

    ¿Puedes ayudarme a resolver este problema? Te estaría muy agradecido y me das alguna pista para solucionarlo.

    Un afectuoso abrazo.

    ResponderEliminar
  5. ¿Cómo podría hacer un formulario de contacto en el que los lectores te puedan mandar texto e imágenes sin ir al correo?

    ResponderEliminar
  6. Hola Oloman! tengo una pequeña duda, pero no relacionada con el tema:
    Por qué con algunas plantillas es como si mi blog no existiera? por ejemplo: cuando intento editar Archivo de blog o etiquetas directamente desde la sidebar me dice que esa página no existe y al buscar mi blog desde otros computadores efectivamente no aparece, pero yo puedo editarlo y visualizarlo. Es un error en el código de la plantilla? Algo más serio? Sabes si puedo hacer algo para arreglarlo?
    No le había tomado mucha importancia, pero me sucede con muchas plantillas.

    Desde ya gracias^^

    ResponderEliminar
  7. Eres un crack. Me alegro que te haya llegado para toda una entrada uno de mis comentarios.

    PD: a veces, menos es más. ;)

    ResponderEliminar
  8. Bueno Terly, ya somos dos (zotes informáticos) GoEar lo he usado muy esporádicamente y he visto los ficheros que tengo publicados y no me dan ese problema. Eso y Occam (amigo también de Antonio) me hacen pensar que has tenido que cambiar algo en tu blog o en la configuración de GoEar y con ello ahora se arranquen solos los audios. Haz memoria y a ver qué puede ser. No tengo otras pistas para darte aparte de que mires que es kriteria.adswizz, porque se trata de algo que te deja la página medio colgada.
    ...
    Antes de cerrar este comentario he podido por fin cargar toda tu página y no se ha arrancado ningún audio. He tenido que pinchar en el "play" para que lo hiciera, lo cual me hace pensar que quizás el misterioso cambio esté en tu navegador en lugar de en la página o en GoEar. Prueba a usar otro.

    ResponderEliminar
  9. Javierlota, hay varios servicios de formularios y casi todos tienen la opción de meter un campo para el envío de texto e incluso ficheros en general (incluidas imágenes, claro). emailmeform es uno de los que he probado satisfactoriamente. En este blog puedes ver un ejemplo de su funcionamiento.

    Si quieres probar otros: Crear formularios

    ResponderEliminar
  10. Makiss, no entiendo muy bien lo que pasa, pero hay cosas que sólo son visibles cuando estas logueado y Blogger detecta que se trata del administrador del sitio. También he detectado que en ocasiones, algunos gadgets sólo se pueden editar desde Elementos de Página y da error si se hace desde el icono de edición rápida, pero esto último no tengo ni idea de por qué ocurre.

    José GDF, tú si que eres un crack. :D

    ResponderEliminar
  11. Amigo Oloman:
    No sé como agradecerte todas las explicaciones que me das con respecto a mi problema. Ya me dijo Antonio que me atenderías por cuyo motivo, doble agradecimiento, a ti por hacerlo y a Antonio por enviarme a ti.
    Copio y me llevo cuanto me dices pata intentar resolver el problema o apoyarme en alguien que sepa hacerlo.
    De nuevo mi agradecimiento y un fuerte abrazo.

    ResponderEliminar
  12. Muchas Gracias por tu Esfuerzo!!!!

    He utilizado bastantes de tus post para mejorar (creo) mi blog, pero el problema que tengo es que mi plataforma es fullblog y muchos de los trucos/consejos no son aplicables.

    Fullblog es mucho más modesta, pero a mí, que ni papa de diseño, me ha resultado más sencillo diseñar mi sitio que en blogguer o wordpress (tengo pequeños intentos).

    Pedirte que ofrezcas trucos para fullblog sería demasiado y lo que pretendo con este comentario es intentar entrar en contacto con otros que como yo hayan optado por fullblog e intercambiar nuestras experiencias y truquillos de amateurs.

    Para los que eséis interesados mi sitio es www.quieroabogado.com (despachoabogados.fullblog.com.ar)

    Un Abrazo y sigue así.

    José

    ResponderEliminar
  13. Oloman, gracias por poner mi web sujerida en tu entrada. ;)
    Pregunta: como hago para que las entradas de mi blog se vea el "publicado por Rodry.D"?
    Puse la opcion pero no aparece, y cuando agrego el efecto "fondo de color en los comentarios del autor del post" noi me funciona porque no aparece que lo publique yo.

    desde ya gracias.

    ResponderEliminar
  14. Hola! ya puse el mio, saludos y gracias!

    ResponderEliminar
  15. Rodry.D, con artilugios expandidos busca el lugar dónde quieres que aparezca (post-footer-line, post-header, etc) y allí inserta esto:

    Author: <data:post.author/>

    Esa etiqueta data es la que guarda el autor de cada post.

    ResponderEliminar
  16. Excelente.!

    Un saludo desde Bogotá, Colombia.

    ResponderEliminar
  17. Gracias Oloman me funciono de maravilla, solo que le tuve que agregar z-index por que me salia debajo de las imagenes xD Saludos y gracias por tus publicaciones que ayudan mucho, seguid asi :D

    ResponderEliminar
  18. Sí, claro. Si hay otros z-index rulando por la plantilla, en este caso habrá que aplicar otro con mayor valor para que se solapen por encima. Gracias por el dato.

    ResponderEliminar
  19. Alo?
    no me funciona correctamente Y_Y la imagen y el texto no se ubican en la misma línea, sino mas bien el texto se ubica centrado en la primera linea y el gif me aparece a la izquierda en una segunda línea, intente agregando style='float:left' por todos lados y me da el mismo resultado. pls ayuda.

    ResponderEliminar
  20. Thor, el código es tal cual lo ves para la imagen que se propone. Si cambias esta o el texto, tendrás que ajustar el ancho y quizás otros valores de posición. No puedo ver tu perfil para decirte más.

    ResponderEliminar