Generador de iconos de carga (loader) con CSS3 | Oloblogger Hay muchos elementos distintivos del CSS3 como las sombras ( box-shadow , text-shadow ), cajas redondeadas ( border-radius ), gradientes ( g...

1 de octubre de 2011

Generador de iconos de carga (loader) con CSS3

Hay muchos elementos distintivos del CSS3 como las sombras (box-shadow, text-shadow), cajas redondeadas (border-radius), gradientes (gradient), transformaciones (transform) y transiciones (transition). Unas nos permiten poder simplificar mucho el código y evitar el uso de más imágenes de las necesarias y otras nos ayudan a acercarnos a efectos que antes estaban reservados para otros lenguajes de programación distintos de HTML, como Flash y JavaScript.

Pero hay uno con el que un diseñador avezado, hace cosas que poco tiempo atrás parecían imposibles de conseguir sólo con hojas de estilo. Son las animaciones, que se consiguen con la propiedad ANIMATION.

En el enlace anterior podéis ver las especificaciones de la propiedad, que es una extensión de TRANSITION, pero si estáis como yo, todavía en una fase muy inicial de aprendizaje de este estándar, seguramente también os suene a chino... o a lemerig, para los afortunados que sepan chino.

Afortunadamente, cada vez salen más artículos sobre cómo hacer cosas puntuales e incluso sitios con generadores que nos facilitan la tarea.


En esta ocasión el que hemos descubierto nos facilita el código necesario para crear una pequeña animación que simula iconos típicos de Ajax que se muestran mientras algo se está cargando. Es CSSload y en ella encontramos hasta 8 modelos distintos que podemos configurar en cuanto a tamaño, colores y velocidad. Nosotros ajustamos esas opciones y la páginas nos facilita el código CSS y el HTML necesario para que se vea.

El ejemplo está ahí mismo en forma de círculo rojo dando vueltas por el perfil de una circunferencia naranja. Aunque parezca un GIF animado, no lo es. Sólo se trata de CSS. La prueba la tendréis si intentáis descargar la imagen. Simplemente no hay imagen, son líneas, bordes de cajas redondas que posteriormente se han animado.

Si no lo ves es porque tu navegador está algo desactualizado (Firefox, Chrome, Safari) o porque usas Internet Explorer, aunque parece que la versión 9 ya empieza a leer algunas de estas cosas.

La forma más fácil de ver qué propiedades soporta tu actual navegador es accediendo a la página de haz.io, que te mostrará en forma de check list, una gran variedad de las nuevas tecnologías que vienen ya están aquí, referentes a HTML, CSS y Javascript.

Este último es otro ejemplo sacado de CSSload.




¿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

14 comentarios :

  1. Gracias Oloman, está interesante.
    Saludos

    ResponderEliminar
  2. Cada vez es más frecuente que el navegador haga el trabajo duro, y más sencillo manejarse con códigos, gracias al CSS3.

    Muy interesante la web de haz.io. No conocía esa herramienta online, va directa a mi carpeta dedicada de los marcadores.

    Un saludo.

    ResponderEliminar
  3. Es fundamental tener el navegador siempre actualizado. Y cada vez evoluciona todo más rápido, nuevas versiones, nuevas aplicaciones, el mundo se mueve constantemente, me parece que ya lo decía un filosofo Griego... :)

    ResponderEliminar
  4. Hola, acabo de descubrirlos y me parece que puedo encontrar en uds. la ayuda que necesito. Tengo en Blogger, varios blosgs y actualmente estoy trabajando con tres fundamentalmente: CELIACOMANIA (http://celiaco-mania.blogspot.com), SAETAS SALUD (http://saetasalud.blogspot.com), ACIPROYV (http://aciproyv.blogspot.com). El tema es que no sé bien como puedo hacer para que la gente me encuentre y como colocar esos botones en los blogs. No sé si me explico bien, yo veo en los blogs algunos botones para que se suscriban y los sigan pero no encuentro como hacerlo. Aclaro que los blogs los hago de pura comedida, me falta capacitación al respecto. Les agradeceré infinitamente si pueden responderme. Clarisa Alvarez

    ResponderEliminar
  5. Hola amigo,he venido a votar tu sitio en Bitácoras,por toda la ayuda que nos acercas día a día.Ahora,si aun te queda un lugarcito,¿votarías mi blog Educación de Adultos? Gracias,si no lo puedes hacer,no importa,igual estoy muy agradecida contigo por lo que me has brindado para salir adelante con mis blogs.
    Un saludo cordial,y mucha suerte,que lo mereces!!!

    ResponderEliminar
  6. Gildo, gracias a ti por seguir leyendo este invento. Eres uno de los lectores incondicionales :)

    José GDF, esta utilidad en concreto no me parece de las mejores, pero al menos sirve para "estudiar" las tripas de esas propiedades. Además, como tu dices, es oportuno usar prioritariamente CSS, ya que facilita la programación y parece que acelera la carga con respecto a otros lenguajes.
    Por otra parte, no quiero ni imaginar cuan larga debe ser ya tu lista de marcadores xD

    Carlos, si que el usuario general debería actualizar siempre a la última versión de su navegador para poder disfrutar de las mejoras que se le suponen. Pero eso es una cosa que a mi parecer no nos podemos permitir los que programamos (por decir algo) con el espíritu de que todo funcione en todas partes. Yo siempre utilizo la penúltima o incluso la antepenúltima versión de cada navegador. Así me aseguro que si yo veo algo bien, lo verá también así al menos el 75% de los visitantes.

    ResponderEliminar
  7. Con los botones no hay problema Clarisa. En este enlace tienes explicado como instalar los más utilizados: botones sociales.
    Si echas de menos algún otro, utiliza el buscador de arriba del todo, que alguno más tenemos.
    Ahora bien, eso no garantiza que encuentren tu página. Sólo ayuda a que tus propios visitantes promocionen a través de las redes sociales aquellos artículos que les gusten y que con el tiempo, tu página sea más conocida.

    Gracias Elsa. Le echaremos un vistazo al tuyo.

    ResponderEliminar
  8. como se aplica denro de la carga de la pagina web

    ResponderEliminar
  9. Eli Saul, puedes usar este sistema y sólo tendrás que cambiar el contenido del DIV del aviso por el código que aquí se cita.

    ResponderEliminar
  10. disculpa pero descargo el codigo para insertarlo, pero no encuentro donde colocarlo. Agradeceria si me des-asnas.

    ResponderEliminar
    Respuestas
    1. Tal cual te lo facilita en esa página lo puedes colocar en un gadget HTML/JavaScript o dentro de la plantilla en el lugar dónde quieres que aparezca. En el segundo caso recuerda cambiar las comillas dobles por sencillas, que Blogger hace cosas raras con ellas.

      Eliminar
  11. Muy buena Página te felicito, por compartir tus conocimientos!!!

    ResponderEliminar