Trobber

¿Qué es un throbber?

El throbber (del inglés throbber — pulsación, latido) es un elemento gráfico animado que sirve como indicador de la realización de acciones en segundo plano, como la carga de contenido, la ejecución de tareas o la implementación de comandos. Este elemento puede ser utilizado en sitios web, aplicaciones o programas de computadora. Un ejemplo clásico de throbber es un círculo giratorio que se muestra en el navegador en el lugar del favicon, mientras se carga una nueva página web. Tales indicadores están casi siempre presentes en las pestañas de los navegadores.

Características del throbber

El throbber, también conocido como indicador de ejecución asíncrono, es una variedad de preloader. A diferencia del indicador de proceso (barra de progreso), que muestra el porcentaje de ejecución o el tiempo restante, el throbber solo muestra que el proceso de carga continúa. A menudo tiene contornos pulsantes, creando un efecto visual que indica que el proceso no está completo. Por lo tanto, el throbber a veces se llama pulsador.

¿Para qué sirve un throbber?

El primer uso del throbber se produjo a principios de la década de 1990 en el navegador web NCSA Mosaic, que sentó las bases para Internet Explorer. Los desarrolladores implementaron un indicador de actividad pulsante para informar a los usuarios que el navegador estaba en funcionamiento y que las páginas se estaban cargando. La tarea principal del throbber es mostrar al usuario que el programa no se ha congelado, sino que continúa realizando acciones.

Funciones adicionales

Además de informar sobre el proceso de carga, el throbber mejora la experiencia del usuario en el sitio o programa. Durante la carga de contenido, como estilos, fuentes e imágenes, los elementos pueden cargarse de manera desigual. El throbber oculta estos momentos poco atractivos para que el usuario no vea elementos vacíos o que no se muestran correctamente. Además, el throbber puede:

• Retener a los usuarios, atrayendo su atención con una animación creativa.
• Desviar la atención de la espera, creando la ilusión de un progreso rápido.
• Aumentar el reconocimiento de la marca mediante logotipos o inscripciones únicas.

¿Dónde se utiliza el throbber?

El throbber aparece en casos donde la carga del sitio tarda más de lo esperado o cuando no hay respuesta del servidor. Puedes ver el ícono de carga en los siguientes lugares:

• En la pestaña del sitio en el navegador.
• En la barra de búsqueda del navegador.
• En la pantalla durante la carga de la página.
• En elementos que se cargan lentamente, como imágenes o videos.
• En aplicaciones móviles y programas.

El throbber puede ocultar completamente el recurso o permitir la interacción con él, por ejemplo, cancelar la carga o volver a la página principal. Si el recurso está completamente oculto, al usuario solo le queda esperar a que termine la carga.

Opciones de presentación del throbber

Cuando se usaron por primera vez en navegadores web, los throbbers tenían la forma de un logotipo animado del programa, y este sigue siendo un método popular hasta hoy. Posteriormente, apareció y se volvió común un ícono giratorio en forma de anillo, conocido como spinner. Puede ser visualizado en varios estilos, dependiendo de la identidad corporativa de la empresa y el diseño del sitio.

Los principales requisitos para la animación de carga son su dinamismo. Las opciones más comunes de preloaders incluyen:

• Puntos parpadeantes en forma de círculo.
• Símbolos cambiantes en programas de consola.
• GIF animados o animaciones CSS.

Cómo agregar un throbber al sitio sin saber código

Para implementar una animación de carga en el sitio, no es necesario ser programador. Existen varias formas sencillas:

Servicios especializados

Utiliza servicios en línea que permiten crear o descargar animaciones de carga y generar el código para insertar. Ejemplos de tales servicios:

• Constructor de preloaders de Hello-site.ru.
• Codepen.
• Loading.io.
• Svgator.
• Generador de CSS Loader.

Después de crear la animación, simplemente copia el código HTML o CSS obtenido.

Plugins para WordPress

Para sitios en WordPress, hay plugins especiales disponibles, como LoftLoader, WP Smart Preloader o "Preloader". Después de instalar y activar el plugin, solo necesitas elegir el diseño deseado y ajustar el elemento.

Funciones integradas de constructores de sitios

En algunos constructores de sitios hay funciones integradas para agregar un throbber o una animación de carga. Por ejemplo, en Tilda se puede utilizar el elemento "microanimación", agregando el bloque "T228" en la parte superior de la página.