The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="skeleton-card" aria-busy="true" aria-label="Loading profile">
  <div class="sk avatar"></div>
  <div class="lines">
    <div class="sk line w-60"></div>
    <div class="sk line w-40"></div>
  </div>
  <div class="sk block"></div>
  <div class="sk line"></div>
  <div class="sk line w-80"></div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.

Create a skeleton loading placeholder for a profile card using only HTML and CSS.

Requirements:
- A white card (min(90vw, 360px) wide, 24px padding, 16px radius, 1px #e8e9f0 border) laid out with CSS grid: a 56px avatar column and a flexible column.
- Placeholders: a circular avatar, two short text lines beside it (60% and 40% wide), a 140px tall image block spanning the full width, and two more text lines (100% and 80%).
- One shared class "sk" provides the shimmer: a linear-gradient (#eceef4 -> #f6f7fb -> #eceef4), background-size 400% 100%, animated by moving background-position from 100% to 0 over 1.4s, infinite.
- Add aria-busy="true" and an aria-label on the card.
- Disable the animation under prefers-reduced-motion.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Sketch the real component's layout with empty blocks: same sizes, same positions.

2. 2

   Create one .sk class with a three-stop gradient that is lighter in the middle.

3. 3

   Make the gradient four times wider than the element with background-size, then animate background-position so the light band sweeps across.

4. 4

   Reuse .sk on every shape; only width, height and border-radius differ.

5. 5

   Mark the container aria-busy='true' while loading and remove it when real content replaces the skeleton.

Customisation tips

• Match the skeleton to the final layout as closely as possible to avoid layout shift (good for Core Web Vitals).
• In Next.js, put the skeleton in loading.js or a Suspense fallback.
• Use slightly darker greys (#2a3050 and #343b60) for a dark-mode skeleton.

More components