Listing cards Free

Skeleton loading cards

A shimmering skeleton placeholder for listing cards while feed results load in.

.skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(0,0,0,.08);
  border-radius: 8px;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.45),
    transparent
  );
  animation: skeleton-shimmer 1.2s infinite;
}
@keyframes skeleton-shimmer {
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; }
}

Add the .skeleton class to placeholder blocks (an image box and a couple of text bars) that you show while the feed is still loading, then swap them for real content once results arrive.

Notes

.skeleton is a generic placeholder class you apply to your own loading markup — it is not a Voxel selector.
Give each skeleton block an explicit width and height so it holds layout space.
Motion is disabled automatically for users who prefer reduced motion.