Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Crear cargadores para tu página en HTML5

Crear cargadores para tu página en HTML5 29.JAN.14

Gianfranco Lemmo
Fundador WebBizarro

Actualmente se está desarrollando una tendencia en la web a realizar páginas con scroll parallax y animaciones en CSS3 y HTML5. Estas páginas se están convirtiendo en sitios con geniales animaciones y gráficas que hacen a uno a pensar, como ya es posible hacer cualquier cosa en HTML5 dejando en el olvido y en el pasado a Flash.

El tema con estos sitios web que muchas veces el peso puede llegar a ser un poco alto, es posible que los usuarios con conexiones lentas puedan llegar a fastidiarse e irse. Le presento el día de hoy un plugin llamado Pace, que nos permite colocar diferentes tipos de cargadores a nuestra página web, para garantizarle al usuario que cuando vea la experiencia esta ya cargo completamente o inclusive se puede utilizar para cosas más específicas como galerías, videos entre otros. 

Este plugin el código fuente lo pueden conseguir en Github y pueden visualizar sus ejemplos en su página oficial. Lo que me gusta de esta herramienta es la facilidad para su implementación veamos lo que tenemos que hacer:

1. Descargamos el plugin de su sitio en Github.
2. Importamos los siguientes archivos

<head>
  <script src="/pace/pace.js"></script>
  <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />
</head>

3. Listo ya automáticamente el plugin comienza a funcionar es simplemente genial, el automáticamente calcula cuanto es el tiempo de carga de todos los archivos.

Para cerrar pueden revisar en esta dirección la documentación y les dejo esta imagen con 4 cargadores de ejemplo de esta genial herramienta.