cardsBeginneranimation
Shimmer Skeleton
A loading-state card with a moving shimmer pulse across each placeholder block.
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
<!--
Source: Vibedex
https://vibedex.io
License: MIT
Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/shimmer-skeleton
-->
<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>