Cargando el complemento jQuery de Dots | Programar Plus

Hace un rato, el lector James Dimick me envió un correo electrónico con un código jQuery en el que estaba trabajando para hacer una cosa de “puntos de carga”. Ya sabes, el patrón de diseño clásico donde la pantalla (o alguna área) muestra “Cargando …” con los puntos creciendo.

Cargando
Cargando.
Cargando..
Cargando…
Cargando….

Eché un vistazo a su código y dije: “Oh, sí, estoy seguro de que podría hacer esto de manera más eficiente”. Luego tomé lo que tenía y lo hice el doble de largo =). Pero para ser justos, lo convertí en un complemento y lo hice hacer más con más flexibilidad.

Que hace

Lo invocas sobre cualquier elemento como este:

$("#randomArea").Loadingdotdotdot({
    "speed": 400,
    "maxDots": 4,
    "word": "Loading"
});

Reemplaza por completo el contenido de ese elemento con el texto “Cargando” (con los puntos animados). La velocidad es qué tan rápido se colocará el siguiente punto. MaxDots es la cantidad de puntos que ocupará antes de que comience de nuevo.

El complemento se asegura de que “Cargando …” esté en el centro exacto, tanto horizontal como verticalmente, del elemento al que se llama.

¿Para qué sirve?

Lo más probable es que lo use en un elemento justo antes de alguna llamada AJAX. Esto les dará a los usuarios alguna indicación de que algo está sucediendo con esa área. Es de suponer que tras el éxito (o error) de esa llamada AJAX, el contenido del área será reemplazado nuevamente (reemplazando el “Cargando …”).

Demo y descarga

Consulte la página de demostración antes de descargar / usar. Hay una función de “limpieza” que debe utilizarse en cualquier entorno en vivo. Hay una función setInterval () que se llama en el complemento y, después de una llamada AJAX exitosa, ese intervalo debe detenerse para evitar que el navegador lo ejecute en un elemento que ya ni siquiera existe.

Ver demostración Descargar archivos

Divertida lección aprendida

Creé este complemento usando lo que creo que es el método Doug Neiner. Entonces, todas las funciones, variables y parámetros están contenidos dentro de la “base” del complemento. Otra cosa que aprendí de Doug es cómo hacer que un complemento haga cosas diferentes dependiendo de los parámetros que le pase. Viste el uso predeterminado arriba, donde le pasas una velocidad y maxDots como un objeto. Sin embargo, la limpieza que hace se realiza pasando al complemento una cadena como

$("#randomArea").Loadingdotdotdot("Stop");

Esto se hace probando el tipo de parámetro antes de hacer nada.

$.fn.Loadingdotdotdot = function(options) {
        if (typeof(options) == "string") {
            // do something
        } else { 
            // do a different (default) thing
        } 
};

Usando animaciones CSS3

James Dimick también comenzó a jugar con animaciones CSS3 y se le ocurrieron algunas técnicas alternativas para este negocio de puntos de carga. Uno de ellos consiste en envolver los puntos dentro de los tramos y luego usar la animación de fotogramas clave para repetir la opacidad de ellos infinitamente, desplazados entre sí.

<p id="loading">Loading<span>.</span><span>.</span><span>.</span></p>

@-webkit-keyframes opacity {
	0% { opacity: 1; }
	100% { opacity: 0; }
}
@-moz-keyframes opacity {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

#loading {
	text-align: center; 
	margin: 100px 0 0 0;
}

#loading span {
	-webkit-animation-name: opacity;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
	
	-moz-animation-name: opacity;
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: infinite;
}

#loading span:nth-child(2) {
	-webkit-animation-delay: 100ms;
	-moz-animation-delay: 100ms;
}

#loading span:nth-child(3) {
	-webkit-animation-delay: 300ms;
	-moz-animation-delay: 300ms;
}

Tenga en cuenta los prefijos de los proveedores y el soporte actual del navegador.

Demostración de animación n. ° 1

Su siguiente idea fue usar un círculo de puntos que se animara, como esos pequeños y divertidos gráficos de carga AJAX, solo que solo con animaciones CSS3.

Demostración de animación n. ° 2

Actualizaciones

25/1/2012:

Complemento actualizado para incluir el parámetro “palabra” para que pueda cambiar el texto fácilmente. Gracias Harris Novick.

Aquí hay otra técnica de animación CSS en la que el grupo de puntos están todos juntos (en lugar de en intervalos separados) y se revelan animando el ancho de su padre con desbordamiento oculto.

Estos hilanderos también son dignos de mención, ya que están en el mismo grupo de patrones de diseño básico.