Un placeholder de carga en CSS

Un bloque gris que brilla, del tamaño de la cosa que todavía no llega.

.skeleton {
  border-radius: 0.375rem;
  background: linear-gradient(90deg, #eef2f7 25%, #e2e8f0 37%,
                              #eef2f7 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}

.skeleton.line { block-size: 0.75rem; margin-block: 0.4rem; }
.skeleton.title { block-size: 1.25rem; inline-size: 60%; }

@keyframes shimmer {
  to { background-position: -135% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: #eef2f7; }
}

Cómo funciona

1. Un degradado en movimiento es una sola animación de background-position.
2. aria-hidden en el markup deja el brillo fuera del orden de lectura.
3. Respeta prefers-reduced-motion: un bloque quieto sigue siendo un placeholder.

Palabras clave y builtins usados aquí

• animation
• background
• deg
• keyframes
• media
• rem
• s

El intento, en números

Líneas

18

Caracteres a escribir

460

Tokens

111

Ritmo de tres estrellas

90 tpm

Al ritmo de tres estrellas de 90 tokens por minuto, este intento toma unos 74 segundos.

Escribe este fragmento

Paso 3 de 3 en Texto y scroll; paso 9 de 13 en Dar estilo a componentes.

← Anterior Siguiente →