CSS Showcase · Live Demo

Loading states, per device.

Skeleton grids on desktop, list placeholders on iPad, and shimmer feeds on mobile — all built with CSS animations, container queries, and semantic tokens.

Featured demo

mobile · shimmer-feed

mobile design patterns

loaders-shimmer-feed.css
/* Shimmer feed */
.shimmer-feed {
  display: grid;
  gap: 0.75rem;
}

.story-strip {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.story-ring {
  flex: 0 0 auto;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border-radius: 999px;
  background: var(--muted);
}

.post-card {
  padding: 0.75rem;
  border-radius: 0.875rem;
  background: var(--card);
  border: 1px solid var(--border);
}

.skeleton {
  border-radius: 0.25rem;
  background: var(--muted);
}

CSS features used

  • • Container queries
  • • CSS keyframe animations
  • • Linear-gradient shimmer
  • • aspect-ratio rings
  • • auto-fill grids
  • • Semantic tokens
  • • filter: blur() placeholders
  • • Grid table layouts