ajax_loaders

Si deseas informar a tus visitantes que tu página se está cargando o que se está realizando una petición por AJAX, necesitarás un “gif de cargando“, es decir, un icono de carga. Estos iconos son comunmente utilizados en sitios y aplicaciones web basados en AJAX, los cuales avisan al usuario de que existe un proceso en ejecución que está realizando una petición de datos.

El principal problema es que este “gif de carga” no es sencillo de crear a menos que tengas las habilidades necesarias para ello.

Afortunadamente, existen varias herramientas online las cuales nos generan este tipo de iconos de carga con unos pocos clicks.

Algunas de estas herramientas no necesitan crear imágenes como tal, sino que utilizan Javascript o CSS3 para crear los mismos efectos de carga. También hay otros sitios web que disponen de una colección de iconos de imágenes listas para descargar.

 




Preloaders

Preloaders tiene una buena colección de iconos de carga en formato APNG y GIF. Puedes establecer el tipo de imagen (APNG o GIF), el fondo (el fondo transparente está disponible), el color principal, el tamaño proporcional, la velocidad de la animación, etcétera.


CSSLoad

Si no quieres una imagen como “icono de cargando”, CSSLoad te permite generar “spinners” utilizando las transiciones, transformaciones y animaciones que permite CSS3 para crear este efecto.


Spin.js

Spin.js es otro generador de “Spinners” que no utiliza ningún tipo de imagen. Utiliza Javascript para los navegadores modernos y utiliza VML como solución en los navegadores antiguos como Internet Explorer. No es necesaria ninguna librería de Javascript (ni siquiera jQuery) para funcionar, aunque también esté disponible un plugin para jQuery.


CanvasLoader Creator

Heartcode CanvasLoader Creator es una herramienta online gratuita para generar iconos de “Cargando”. Este generador de iconos utiliza la librería CanvasLoader UI, una ligera librería de interfaces Javascript que se puede utilizar para crear “Spinners” a través del objeto canvas de HTML 5 en los navegadores modernos y utilizar VML en los navegadores antiguos. Igual que Spin.js, no se necesitan imágenes externas o archivos CSS.


NETEYE Activity Indicator

Este plugin de jQuery genera un indicador de actividad (Spinner) utilizando SVG o VML.

No se necesitan imágenes ni archivos CSS externos, además funciona correctamente con la mayoría de navegadores (Internet Explorer 6 incluido), soporta transparencias Alpha, degradados y se puede configurar en casi todos sus aspectos. Desafortunadamente, no dispone de una interfaz de usuario por lo que tendrás que pasar las opciones manualmente en el código.


Ajaxload

Ajaxload está todavía en fase beta y solo cuenta con la opción de crear los iconos de carga como imágenes de tipo GIF. Puedes establecer un color de fondo y el color principal. Su principal inconveniente es que cuenta con un número limitado de iconos.


Chimply

Chimply se encuentra todavía en fase beta pero ya cuenta con una buena colección de iconos de carga organizados en categorías (spinners y barras de carga). Este generador online permite modificar tanto el color de fondo como el color frontal, la velocidad de la animación, el ancho y el tamaño del icono de carga. Podrás descargarte los iconos generados en formato GIF o SWF.


Loading GIF

Loading GIF es un generador que ofrece unos cuantos iconos de carga muy curiosos. Lo malo es que lo único que podrás cambiar será el color de fondo y el color frontal del icono generado.

 

Sobre Reacción Estudio

Somos un estudio informático formado por jóvenes centrados en el desarrollo web, el diseño gráfico y la fotografía. Puedes solicitar presupuesto para tu proyecto a través de nuestra página web o por teléfono, pero en este blog hablaremos de todo lo que engloba el desarrollo web a día de hoy.


  • http://www.sobrevuelo.tumblr.com/ maria carrara

    hola, ¿pero cómo hago para que cuando la página cargue, el ícono desaparezca?

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies.     ACEPTAR