Loader

Indica que un proceso está en curso y que el usuario debe esperar hasta que se complete. Su propósito es proporcionar retroalimentación visual sobre la carga de datos o el procesamiento de una acción, evitando la incertidumbre en la experiencia del usuario.

Playground

smallmediumlarge

Mostrar mensajes

Ruby

<%= buk_loader   %>

Vue

<BukLoader  >

Javascript

const loader = createLoader()

Lista de parámetros

Ruby

Propiedad	Tipo	Detalle
messages	Boolean | String | String[]	Define los mensajes personalizados para el loader. true: Muestra mensajes predefinidos. String: Muestra un mensaje estático junto con el loader. String[]: Muestra una lista de mensajes personalizados, cambiando cada 5 segundos.
size	:large | :medium | :small	Especifica el tamaño del loader. Por defecto usa el valor :large small: No se admite texto en este tamaño.
options*	String	Permite agregar atributos HTML al contenedor del componente. Por ejemplo: <%= buk_loader class: "d-none" %>

---

Anatomía

1. Animación

Animación visual del loader que comunica que el sistema está procesando una acción, brindando una sensación de dinamismo y continuidad.

2. Texto [opcional]

Mensajes personalizables que permite mostrar información al usuario para cuando la carga demora más de 3 segundos.

Propiedades

Texto

Lo usamos únicamente cuando tenemos tiempos de carga de más de 3 segundos. De lo contrario el loader no lleva texto.
Existen 4 mensajes predefinidos que cambian cada 5 segundos para evitar que el usuario sienta que el sistema no responde:

• Preparando todo para ti.
• Solo un momento más.
• Ya casi está listo, un instante más.
• Ajustando los últimos detalles.

Estos mensajes se pueden personalizar según el tipo de contenido que se esté cargando. Por ejemplo, si se trata de Selección: “Cargando los candidatos”.

Tamaños

Large (default): Lo usamos cuando estamos cargando todo el contenido del body.

Medium: Cuando estamos cargando contenido en un contenedor de aproximadamente un cuarto del body.

Small: Para contenedores pequeños, como por ejemplo una card metric.