Cargador
Un indicador que muestra el progreso de una tarea, como carga, descarga, procesamiento, etc., hasta que la interfaz esté lista para la interacción del usuario. El indicador no muestra un progreso medible; más bien, indica que el proceso aún no se ha completado y sigue en curso.
Aplicación
✅ Cuándo usar
- Cuando la carga toma más de 300 ms. El loader no debe mostrarse durante intervalos extremadamente cortos, ya que esto causa parpadeos que podrían ser incómodos para el usuario. Si elige mostrar el loader, evite el efecto de parpadeo. Si la carga toma menos de 300 ms, no muestre nada.
- Cuando no se puede predecir el tipo de contenido.
- Cuando se usa un loader para carga asíncrona, debe mostrarse exactamente donde se está realizando la carga. La carga de un solo elemento no debe bloquear el resto de la interfaz.
🚫 Cuándo no usar
- Si el tiempo de carga excede los 10 segundos y se conoce la duración exacta, se debe mostrar una barra de progreso.
- Si se puede predecir el tipo de contenido, considere usar un skeleton.
- Cuando la carga se inicia con un clic en un botón, usar el estado del botón como retroalimentación es suficiente, especialmente en ventanas modales.
Tamaños
- S — Tamaño básico. Se utiliza en campos de entrada, ventanas emergentes, celdas de tabla y otras áreas de espacio limitado.
- M — tamaño medio, utilizado en tarjetas y tablas
- L — tamaño grande, utilizado en páginas completas y ventanas modales grandes (diálogo)
Ejemplos de aplicaciones
-
Cuando el contenido aún no se ha mostrado.
-
Sobre el contenido si se está actualizando o modificando. Así es como se usa el loader sobre el contenido:
Transparencia del contenido 30%
-
Trate de evitar superponer el loader sobre el contenido si hay espacio para esto.
-
Si la pista proporciona información útil, como una explicación del proceso en curso, puede incluirse. Dado que el loader ya muestra al usuario que la carga está en progreso, no se necesitan revelaciones adicionales.
