Pulse skeleton row

Pulse skeleton row: a CSS card. Copy the rules, or the prompt that rebuilds it.

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

Make a 360px skeleton list row: flex, 14px gap, 12px 14px padding, white with a 1px #f1f5f9 border and 12px radius. Left a 44px gray #e2e8f0 circle (avatar), middle two 11px tall #e2e8f0 lines at 55% and 85% width stacked with 8px gap, right a 64x28px #e2e8f0 rounded block (button). The whole row pulses between 100% and 45% opacity every 1.6s with ease-in-out.

Pulse skeleton row

Same shelf