Animated Shimmer Skeleton Card

Colours in this gradient

• #0f172a
• #1e293b
• #334155

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="skel-stage">
  <div class="skel-card">
    <div class="skel-banner skel-anim"></div>
    <div class="skel-body">
      <div class="skel-row">
        <div class="skel-avatar skel-anim"></div>
        <div class="skel-text-group">
          <div class="skel-line skel-w-60 skel-anim"></div>
          <div class="skel-line skel-w-40 skel-anim"></div>
        </div>
      </div>
      <div class="skel-line skel-w-100 skel-anim"></div>
      <div class="skel-line skel-w-85 skel-anim"></div>
    </div>
  </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 an animated shimmer skeleton placeholder loading card in HTML and CSS.

Requirements:
- Image banner, user avatar, and text lines skeleton structure.
- Smooth linear-gradient shimmer wave translating from right to left.
- Dark theme (#0f172a base, #1e293b to #334155 highlight).
- prefers-reduced-motion support.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Structure card layout with placeholder elements.

2. 2

   Apply linear-gradient(90deg, #1e293b, #334155, #1e293b) with background-size: 200% 100%.

3. 3

   Animate background-position continuously across keyframes.

Customisation tips

• Skeleton screens dramatically reduce perceived loading time compared to traditional spinners.

More components