Design for AI

Fila esqueleto pulsante

Fila esqueleto pulsante: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.

skeletonloadingpulselist-itemplaceholder

CSS
.card-051 {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 360px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
  animation: card-051-pulse 1.6s ease-in-out infinite
}
.card-051__avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e2e8f0
}
.card-051__lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px
}
.card-051__lines i {
  display: block;
  height: 11px;
  border-radius: 6px;
  background: #e2e8f0
}
.card-051__btn {
  width: 64px;
  height: 28px;
  border-radius: 8px;
  background: #e2e8f0
}
@keyframes card-051-pulse {
  0%,100% {
    opacity: 1
  }
  50% {
    opacity: .45
  }
}
@media (prefers-reduced-motion: reduce) {
  .card-051, .card-051 * { animation: none; transition: none; }
}
HTML
<div class="card-051" aria-busy="true">
  <span class="card-051__avatar"></span>
  <span class="card-051__lines"><i style="width:55%"></i><i style="width:85%"></i></span>
  <span class="card-051__btn"></span>
</div>
Prompt

Haz una fila de lista esqueleto de 360px: flex, gap 14px, padding 12px 14px, blanca con borde 1px #f1f5f9 y radio 12px. A la izquierda un círculo gris #e2e8f0 de 44px (avatar), en medio dos líneas #e2e8f0 de 11px de alto al 55% y 85% de ancho apiladas con gap 8px, a la derecha un bloque redondeado #e2e8f0 de 64x28px (botón). La fila entera pulsa entre 100% y 45% de opacidad cada 1.6s con ease-in-out.

Misma estantería