Mensajes de estado

Content Loading Card

Content Loading Card: Un marcador de posición en forma de tarjeta que respira con un lento pulso opacity mientras aún se cargan un gran bloque de imagen y dos líneas de texto.

Cómo usar Content Loading Card

Content Loading Card se presenta con el formato de vista previa «tarjeta» y el tema «claro/oscuro».

Personalizar la vista previa

Estos controles se pasan a la demo. Los valores y límites describen la vista previa; consulta la implementación para conocer todas sus props.

Control	Tipo	Valor inicial	Límites de la vista previa
`layout`	`select`	`card`	Opciones: card, list, profile
`pulse`	`boolean`	`true`	Los metadatos no indican otro límite.

¿Para qué frameworks está disponible Content Loading Card?

Content Loading Card está disponible para React, Vue, Svelte, Astro, HTML. La vista previa usa React; las observaciones sobre el código corresponden a index.tsx. Revisa la versión elegida antes de asumir que ofrece las mismas interacciones.

¿Qué dependencias tiene Content Loading Card?

Los metadatos de React indican estas dependencias npm además de React: motion.

¿Qué detalles de accesibilidad se observan en Content Loading Card?

El código React de Content Loading Card incluye: atributos y manejadores (aria-hidden, aria-label); roles explícitos (status). Son observaciones del código. Comprueba los nombres accesibles, el orden del foco y el comportamiento del teclado en la página completa.

¿Cómo maneja Content Loading Card el movimiento reducido?

Content Loading Card consulta la preferencia de movimiento en su código React mediante useReducedMotion(). Revisa la implementación completa, los estilos compartidos y la versión elegida con movimiento reducido activado; estas observaciones no garantizan que se detengan todas las animaciones.

Conecta tu agente

Componentes abiertos relacionados

Imagen fija del componente Empty State Panel de Fieldbook, de la categoría Mensajes de estado.

1922Empty State PanelMensajes de estadoUn marcador de posición centrado que se muestra en lugar de una lista vacía, con un título, una descripción y una o dos acciones iniciales.

Imagen fija del componente Curtain line loader de Fieldbook, de la categoría Mensajes de estado.

2138Curtain line loaderMensajes de estadoUna cortina de carga que se retira detrás de una línea viajera brillante, cortando el contenido terminado a la vista en lugar de desvanecerlo.

Imagen fija del componente Fill progress loading text de Fieldbook, de la categoría Mensajes de estado.

1958Fill progress loading textMensajes de estadoUna etiqueta de carga se asienta como un tenue contorno de sí misma, mientras que una copia de color sólido la completa desde la izquierda como una barra de progreso con la forma de la palabra, deslizándose hacia adelante y hacia atrás mientras se realiza el trabajo.

Imagen fija del componente Labeled progress bar de Fieldbook, de la categoría Mensajes de estado.

1988Labeled progress barMensajes de estadoUna pista de progreso etiquetada cuyo relleno se reduce a un nuevo ancho mientras que una lectura de porcentaje cuenta suavemente para coincidir.

Imagen fija del componente Quiet Ring Spinner de Fieldbook, de la categoría Mensajes de estado.

2020Quiet Ring SpinnerMensajes de estadoUn anillo de carga mínimo de un solo elemento: un círculo delgado con un cuarto de color que gira continuamente para marcar un estado de actividad.

Imagen fija del componente Segment Fade Spinner de Fieldbook, de la categoría Mensajes de estado.

2224Segment Fade SpinnerMensajes de estadoUn indicador de carga de ocho segmentos radiales que aparecen y desaparecen en secuencia para que un arco brillante parezca perseguirse alrededor del anillo.