Componentes · Estado
Loading (estados de carga)
Comunica esperas indeterminadas mediante spinner, puntos o esqueletos sin alterar el layout final.
Spinner
Indica una espera breve o localizada.
Puntos
Acompañan procesos conversacionales o progresivos.
Skeleton
Reserva el espacio del contenido mientras carga.
Código + resultado
Ejemplos aplicados de Loading
Selecciona un patrón para revisar únicamente su código y el resultado correspondiente.
<div class="q-loading" role="status">
<span class="q-spinner rounded-c" aria-hidden="true">
</span>
<span>
Cargando…
</span>
</div>Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.
<div class="q-loading-dots color-violet-500" role="status" aria-label="Procesando">
<span class="rounded-c">
</span>
<span class="rounded-c">
</span>
<span class="rounded-c">
</span>
</div>Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.
<div class="q-card rounded-12 shadow-box-s">
<div class="q-card__body grid g-12">
<span class="q-skeleton rounded-8 q-skeleton--title">
</span>
<span class="q-skeleton rounded-8 q-skeleton--text">
</span>
<span class="q-skeleton rounded-8 q-skeleton--text-short">
</span>
</div>
</div>Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.
Referencia
Clases disponibles
La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive.
| Clase o atributo | Función | Uso recomendado |
|---|---|---|
.q-loading | Grupo | Alinea indicador y mensaje. |
.q-spinner | Spinner | Indicador circular base. |
.q-spinner--sm | Spinner pequeño | Reduce el indicador. |
.q-spinner--lg | Spinner grande | Aumenta el indicador. |
.q-loading-dots | Puntos | Indicador alternativo de espera. |
.color-* | Color personalizable | Aplica cualquier utilidad de color del framework al contenedor de puntos. |
.q-skeleton | Esqueleto | Marcador de contenido pendiente. |
.q-skeleton--title | Título | Esqueleto con proporción de encabezado. |
.q-skeleton--text | Texto | Esqueleto de línea completa. |
.q-skeleton--text-short | Texto breve | Esqueleto de línea reducida. |
.grid | Layout auxiliar | Organiza los indicadores en columnas. |
.q-card | Superficie auxiliar | Presenta cada tipo de carga como tarjeta. |
.shadow-box-s | Sombra opcional | Eleva la superficie auxiliar sin modificar Card. |
.q-card__body | Contenido auxiliar | Contiene el indicador y su descripción. |
.g-12 | Separación interna | Aplica 12px entre elementos internos. |
.bc-{token} | Color de acento | Sincroniza el spinner y los puntos de carga. |
.rounded-c | Forma circular | Redondea spinner y puntos mediante una utilidad. |
.rounded-8 | Radio del skeleton | Redondea cada bloque de carga. |
.rounded-12 | Superficie auxiliar | Redondea la Card usada por el skeleton. |
Recomendaciones
Buenas prácticas de Loading
Mensaje accesible
Incluye texto visible o aria-label con el estado.
Evita esperas falsas
Retira Loading apenas el contenido esté disponible.
Reserva espacio
Skeleton debe parecerse a la estructura final.
Reduced motion
Las animaciones se detienen si el usuario lo solicita.