Crear un preloader con jQuery y CSS3

La posibilidad de introducir un preloader para nuestras páginas es una ventaja visual que resultará útil para darle mayor elegancia a nuestro sitio, mientras el usuario espera que termine de cargar.

Seguramente conocemos muchas soluciones creadas en AJAX (¡y haste en Flash, algún tiempo atrás!). Pero con la llegada de HTML5 y CSS3, comenzamos a tener nuevas posibilidades para resolver esta necesidad.

Alessio Atzeni, apasionado Web Designer y Javascript web development ha creado un interesante tutorial sobre como utilizar las propiedades de animación de CSS3 combinadas con jQuery para obtener un muy buen preloader para nuestras página.

El tutorial y el resultado lo podremos ver si ingresamos en el siguiente enlace: CSS3 Preloader Animation for only User Agent supports it.

Para conocer más info sobre Alessio Atzeni, podemos ingresar en: http://www.alessioatzeni.com/about/

Más sobre Diseño y desarrollo Web


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Diseño y Programación Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios digitales. Dicto capacitaciones y consultorías sobre lenguajes y herramientas de desarrollo Web

2 Comentarios en “Crear un preloader con jQuery y CSS3
  1. Buen día amigo, probé este ejemplo y no me funciona podría ayudarme porfavor esta web es la página que diseñé pero quiero colocarle un preloader para que tenga mas estética amigo

    • Damián dice:

      ¿Lo estás probando en Chrome y con los archivos colocados en un servidor? Algunas características de AJAX requieren estar en un servidor (o al menos en un servidor local) para funcionar correctamente.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*


Cursos y capacitaciones para empresas y profesionales

  • HTML & CSS (maquetado web).
  • CSS3 & Responsive Web Design (diseño web adaptado a móviles y tablets).
  • Flexbox & Grids (técnicas modernas de CSS).
  • LESS & SASS (CSS preprocessors).
  • Responsive E-mail (diseño de emails multidispositivo).
  • Bootstrap (el framework de diseño más utilizado).
  • HTML5 (Nivel inicial y Avanzado + APIs).
  • PhoneGap/Cordova (Aplicaciones para Android e iOS basadas en lenguajes Web).
  • JavaScript (Nivel inicial y avanzado con ECMAScript 6).
  • jQuery (una de las librerías más famosas de JavaScript).
  • Angular (framework para construir aplicaciones Web con JavaScript).
  • PHP & MySQL (programación del lado servidor y bases de datos).

Encontrame en las redes sociales. Contactame.