Componentes • Cargador
Diseño
General
Componentes
Acción TooltipAlertaMigas de panBotónTarjetaDiálogo de registro de cambiosCasilla de verificaciónBotón de portapapelesDiálogoMenú desplegableTecla de acceso rápidoEtiquetaEnlacesLista y elemento de listaCargadorPaginaciónPopoverPopupProgresoRadioGrupo de radio segmentadoGrupo de radioSeleccionarEsqueletoGirarInterruptorTablaPestañasÁrea de textoEntrada de textoToasterTooltipUsuarioEtiqueta de usuario
Cargador
{/*  */}
Un indicador que muestra el progreso de una tarea, como cargar, descargar, procesar, 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**
1. Cuando la carga tarda más de 300 ms. El cargador no debe mostrarse durante intervalos extremadamente cortos, ya que esto causa un parpadeo que puede ser incómodo para el usuario. Si decide mostrar el cargador, evite el efecto de parpadeo. Si la carga tarda menos de 300 ms, no muestre nada.
2. Cuando el tipo de contenido no se puede predecir.
3. Al usar un cargador para carga asíncrona, debe mostrarse exactamente donde está ocurriendo la carga. La carga de un solo elemento no debe bloquear el resto de la interfaz.
{/*  */}
🚫 **Cuándo no usar**
1. Si el tiempo de carga supera los 10 segundos y se conoce la duración exacta, se debe mostrar una barra de progreso.
2. Si el tipo de contenido se puede predecir, considere usar un esqueleto.
3. Cuando la carga es iniciada por un clic de botón, usar el estado del botón como retroalimentación es suficiente, especialmente en ventanas modales.
### Tamaños
1. **S** — Tamaño básico. Se utiliza en campos de entrada, ventanas emergentes, celdas de tablas y otras áreas con espacio limitado.
2. **M** — Tamaño mediano, se utiliza en tarjetas y tablas.
3. **L** — Tamaño grande, se utiliza en páginas completas y ventanas modales grandes (diálogos).
### Ejemplos de aplicaciones
1. Cuando el contenido aún no se ha mostrado.
2. Sobre el contenido si se está actualizando o modificando. Así es como se usa el cargador sobre el contenido:
Transparencia del contenido 30%
{/* 
Cargador en una capa de fondo */}
3. Intente evitar superponer el cargador sobre el contenido si hay espacio para ello.
4. Si la indicación proporciona información útil, como una explicación del proceso en curso, puede incluirse. Dado que el cargador ya muestra al usuario que la carga está en progreso, no se necesitan divulgaciones adicionales.
