Skeleton Loader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<!--
Snippet Name: Skeleton Loader
Description: Shimmering placeholder skeleton for loading content - card image, title, lines, and avatar. Pure CSS shimmer animation.
Author: DevSnips Contributors
Usage Example: Show while fetching data; swap in real content once loaded. Toggle .skeleton-loaded to reveal.
-->
<div class="skeleton-card w-full max-w-sm overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm" role="status" aria-live="polite" aria-label="Loading content">
  <div class="skeleton-shimmer relative h-40 w-full bg-gray-200"></div>
  <div class="space-y-4 p-5">
    <div class="flex items-center gap-3">
      <div class="skeleton-shimmer h-10 w-10 rounded-full bg-gray-200"></div>
      <div class="flex-1 space-y-2">
        <div class="skeleton-shimmer h-3 w-1/2 rounded bg-gray-200"></div>
        <div class="skeleton-shimmer h-3 w-1/3 rounded bg-gray-200"></div>
      </div>
    </div>
    <div class="space-y-2">
      <div class="skeleton-shimmer h-3 w-full rounded bg-gray-200"></div>
      <div class="skeleton-shimmer h-3 w-full rounded bg-gray-200"></div>
      <div class="skeleton-shimmer h-3 w-2/3 rounded bg-gray-200"></div>
    </div>
  </div>
</div>

<style>
  .skeleton-shimmer {
    background-image: linear-gradient(90deg, rgb(229 231 235) 25%, rgb(243 244 246) 37%, rgb(229 231 235) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
  }
  @keyframes skeleton-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .skeleton-shimmer { animation: none; }
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12

# Skeleton Loader

Skeleton loading placeholder.

## Usage
```bash
npx devsnips add Tailwind/Components/Progress/skeleton-loader
```
Copy from `code.html`. Prefer `aria-busy` on the loading region.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`