Design for AI

Pulsierende Skeleton-Zeile

Pulsierende Skeleton-Zeile: CSS-Card. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

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

Erstelle eine 360px Skeleton-Listenzeile: flex, 14px Gap, 12px 14px Padding, weiß mit 1px #f1f5f9 Rahmen und 12px Radius. Links ein 44px grauer #e2e8f0 Kreis (Avatar), in der Mitte zwei 11px hohe #e2e8f0 Linien bei 55% und 85% Breite, gestapelt mit 8px Gap, rechts ein 64x28px #e2e8f0 abgerundeter Block (Button). Die ganze Zeile pulsiert alle 1.6s mit ease-in-out zwischen 100% und 45% Deckkraft.

Gleiches Regal