Design for AI

Linha skeleton pulsante

Linha skeleton pulsante: um card em CSS. Copie as regras, ou o prompt que o reconstrói.

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

Faça uma linha de lista skeleton de 360px: flex, gap de 14px, padding 12px 14px, branca com borda de 1px #f1f5f9 e raio de 12px. À esquerda um círculo cinza #e2e8f0 de 44px (avatar), no meio duas linhas #e2e8f0 de 11px de altura com 55% e 85% de largura empilhadas com gap de 8px, à direita um bloco arredondado #e2e8f0 de 64x28px (botão). A linha inteira pulsa entre 100% e 45% de opacidade a cada 1.6s com ease-in-out.

Mesma prateleira