cardsBeginneranimation

Shimmer Skeleton

A loading-state card with a moving shimmer pulse across each placeholder block.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a shimmer-loading skeleton: a grid of three card placeholders, each with an image block and three text-line blocks of varying width. Each block has a `.sk` class with a darker background, and a ::after pseudo-element with a translucent diagonal gradient that translates from -100% to +100% on a 1.6s infinite loop, creating the shimmer pulse. No JS — pure CSS.

Code

html

<div class="grid">
  <article class="card">
    <div class="img sk"></div>
    <div class="row sk" style="width:75%"></div>
    <div class="row sk" style="width:90%"></div>
    <div class="row sk" style="width:55%"></div>
  </article>
  <article class="card">
    <div class="img sk"></div>
    <div class="row sk" style="width:80%"></div>
    <div class="row sk" style="width:65%"></div>
    <div class="row sk" style="width:45%"></div>
  </article>
  <article class="card">
    <div class="img sk"></div>
    <div class="row sk" style="width:70%"></div>
    <div class="row sk" style="width:85%"></div>
    <div class="row sk" style="width:50%"></div>
  </article>
</div>