Challenge

Skeleton Loading Placeholder

Easy

css
animation

Draw a loading skeleton for a card: gray placeholder shapes with a shimmer moving across them, standing in for content that has not arrived yet, such as an avatar and a couple of lines of text.

Notes:

The starter has an empty .card. HTML and CSS are enough.

Check your work against

At least 3 placeholder blocks (e.g. an avatar circle plus two text-line bars)
A visible shimmer/pulse animation, not a static gray block
Laid out like a real card, not loose bars with no structure

No automatic grading

Check your work against the list above, then compare it with the solution preview.

Tab indents. Press Esc, then Tab to leave the editor.

Live preview

Starter loaded. The preview updates as you type.