|$ curl https://forge-ai.dev/api/markdown?path=docs/components/skeleton
$cat docs/skeleton-loaders.md
updated Recently·11 min read·published
Skeleton Loaders
Loading placeholders for text, cards, avatars, tables, and custom shapes with shimmer pulse animation.
Text Skeleton
Paragraph-shaped skeleton lines with varying widths to mimic natural text wrapping.
text-skeleton
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="sk-line w100"> |
| 3 | </div> |
| 4 | <div class="sk-line w95"> |
| 5 | </div> |
| 6 | <div class="sk-line w80"> |
| 7 | </div> |
| 8 | <div class="sk-line w60"> |
| 9 | </div> |
| 10 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | max-width:400px; |
| 3 | margin:20px auto; |
| 4 | display:flex; |
| 5 | flex-direction:column; |
| 6 | gap:10px; |
| 7 | padding:24px |
| 8 | } |
| 9 | .sk-line { |
| 10 | height:12px; |
| 11 | border-radius:6px; |
| 12 | background:linear-gradient(90deg, |
| 13 | #1A1A2E 25%, |
| 14 | #2A2A3E 50%, |
| 15 | #1A1A2E 75%); |
| 16 | background-size:200% 100%; |
| 17 | animation:shimmer 1.5s ease-in-out infinite |
| 18 | } |
| 19 | .w100 { |
| 20 | width:100% |
| 21 | } |
| 22 | .w95 { |
| 23 | width:95% |
| 24 | } |
| 25 | .w80 { |
| 26 | width:80% |
| 27 | } |
| 28 | .w60 { |
| 29 | width:60% |
| 30 | } |
| 31 | @keyframes shimmer { |
| 32 | 0% { |
| 33 | background-position:200% 0 |
| 34 | } |
| 35 | 100% { |
| 36 | background-position:-200% 0 |
| 37 | } |
| 38 | } |
ℹ
info
Make the last line shorter than the others (60-70% width) to mimic natural text wrapping. This small detail makes the skeleton feel much more realistic than uniform-width lines.
Avatar + Text
Skeleton for a user row with circular avatar placeholder and text lines — common in feeds and lists.
avatar-text-skeleton
Live
untitled.html
HTML
| 1 | <div class="list"> |
| 2 | <div class="row"> |
| 3 | <div class="sk-circle"> |
| 4 | </div> |
| 5 | <div class="lines"> |
| 6 | <div class="sk-line w40"> |
| 7 | </div> |
| 8 | <div class="sk-line w70"> |
| 9 | </div> |
| 10 | </div> |
| 11 | </div> |
| 12 | <div class="row"> |
| 13 | <div class="sk-circle"> |
| 14 | </div> |
| 15 | <div class="lines"> |
| 16 | <div class="sk-line w35"> |
| 17 | </div> |
| 18 | <div class="sk-line w60"> |
| 19 | </div> |
| 20 | </div> |
| 21 | </div> |
| 22 | <div class="row"> |
| 23 | <div class="sk-circle"> |
| 24 | </div> |
| 25 | <div class="lines"> |
| 26 | <div class="sk-line w50"> |
| 27 | </div> |
| 28 | <div class="sk-line w80"> |
| 29 | </div> |
| 30 | </div> |
| 31 | </div> |
| 32 | <div class="row"> |
| 33 | <div class="sk-circle"> |
| 34 | </div> |
| 35 | <div class="lines"> |
| 36 | <div class="sk-line w30"> |
| 37 | </div> |
| 38 | <div class="sk-line w55"> |
| 39 | </div> |
| 40 | </div> |
| 41 | </div> |
| 42 | </div> |
untitled.css
CSS
| 1 | .list { |
| 2 | max-width:400px; |
| 3 | margin:16px auto; |
| 4 | padding:0 16px |
| 5 | } |
| 6 | .row { |
| 7 | display:flex; |
| 8 | align-items:center; |
| 9 | gap:12px; |
| 10 | padding:12px 0; |
| 11 | border-bottom:1px solid #1A1A2E |
| 12 | } |
| 13 | .sk-circle { |
| 14 | width:40px; |
| 15 | height:40px; |
| 16 | border-radius:50%; |
| 17 | flex-shrink:0; |
| 18 | background:linear-gradient(90deg, |
| 19 | #1A1A2E 25%, |
| 20 | #2A2A3E 50%, |
| 21 | #1A1A2E 75%); |
| 22 | background-size:200% 100%; |
| 23 | animation:shimmer 1.5s ease-in-out infinite |
| 24 | } |
| 25 | .lines { |
| 26 | display:flex; |
| 27 | flex-direction:column; |
| 28 | gap:8px; |
| 29 | flex:1 |
| 30 | } |
| 31 | .sk-line { |
| 32 | height:10px; |
| 33 | border-radius:5px; |
| 34 | background:linear-gradient(90deg, |
| 35 | #1A1A2E 25%, |
| 36 | #2A2A3E 50%, |
| 37 | #1A1A2E 75%); |
| 38 | background-size:200% 100%; |
| 39 | animation:shimmer 1.5s ease-in-out infinite |
| 40 | } |
| 41 | .w30 { |
| 42 | width:30% |
| 43 | } |
| 44 | .w35 { |
| 45 | width:35% |
| 46 | } |
| 47 | .w40 { |
| 48 | width:40% |
| 49 | } |
| 50 | .w50 { |
| 51 | width:50% |
| 52 | } |
| 53 | .w55 { |
| 54 | width:55% |
| 55 | } |
| 56 | .w60 { |
| 57 | width:60% |
| 58 | } |
| 59 | .w70 { |
| 60 | width:70% |
| 61 | } |
| 62 | .w80 { |
| 63 | width:80% |
| 64 | } |
| 65 | @keyframes shimmer { |
| 66 | 0% { |
| 67 | background-position:200% 0 |
| 68 | } |
| 69 | 100% { |
| 70 | background-position:-200% 0 |
| 71 | } |
| 72 | } |
Card Skeleton
Skeleton placeholder for a content card with image area, title, text lines, and action buttons.
card-skeleton
Live
untitled.html
HTML
| 1 | <div class="card-sk"> |
| 2 | <div class="sk-img"> |
| 3 | </div> |
| 4 | <div class="card-body"> |
| 5 | <div class="sk-line w60 title"> |
| 6 | </div> |
| 7 | <div class="sk-line w100"> |
| 8 | </div> |
| 9 | <div class="sk-line w90"> |
| 10 | </div> |
| 11 | <div class="sk-line w75"> |
| 12 | </div> |
| 13 | <div class="actions"> |
| 14 | <div class="sk-btn"> |
| 15 | </div> |
| 16 | <div class="sk-btn"> |
| 17 | </div> |
| 18 | </div> |
| 19 | </div> |
| 20 | </div> |
untitled.css
CSS
| 1 | .card-sk { |
| 2 | max-width:340px; |
| 3 | margin:16px auto; |
| 4 | border-radius:12px; |
| 5 | overflow:hidden; |
| 6 | border:1px solid #1A1A2E; |
| 7 | background:#0A0A0F |
| 8 | } |
| 9 | .sk-img { |
| 10 | width:100%; |
| 11 | height:140px; |
| 12 | background:linear-gradient(90deg, |
| 13 | #1A1A2E 25%, |
| 14 | #252538 50%, |
| 15 | #1A1A2E 75%); |
| 16 | background-size:200% 100%; |
| 17 | animation:shimmer 1.5s ease-in-out infinite |
| 18 | } |
| 19 | .card-body { |
| 20 | padding:16px; |
| 21 | display:flex; |
| 22 | flex-direction:column; |
| 23 | gap:10px |
| 24 | } |
| 25 | .sk-line { |
| 26 | height:10px; |
| 27 | border-radius:5px; |
| 28 | background:linear-gradient(90deg, |
| 29 | #1A1A2E 25%, |
| 30 | #2A2A3E 50%, |
| 31 | #1A1A2E 75%); |
| 32 | background-size:200% 100%; |
| 33 | animation:shimmer 1.5s ease-in-out infinite |
| 34 | } |
| 35 | .sk-line.title { |
| 36 | height:14px; |
| 37 | border-radius:7px |
| 38 | } |
| 39 | .w60 { |
| 40 | width:60% |
| 41 | } |
| 42 | .w75 { |
| 43 | width:75% |
| 44 | } |
| 45 | .w90 { |
| 46 | width:90% |
| 47 | } |
| 48 | .w100 { |
| 49 | width:100% |
| 50 | } |
| 51 | .actions { |
| 52 | display:flex; |
| 53 | gap:10px; |
| 54 | margin-top:4px |
| 55 | } |
| 56 | .sk-btn { |
| 57 | height:32px; |
| 58 | width:80px; |
| 59 | border-radius:6px; |
| 60 | background:linear-gradient(90deg, |
| 61 | #1A1A2E 25%, |
| 62 | #2A2A3E 50%, |
| 63 | #1A1A2E 75%); |
| 64 | background-size:200% 100%; |
| 65 | animation:shimmer 1.5s ease-in-out infinite |
| 66 | } |
| 67 | @keyframes shimmer { |
| 68 | 0% { |
| 69 | background-position:200% 0 |
| 70 | } |
| 71 | 100% { |
| 72 | background-position:-200% 0 |
| 73 | } |
| 74 | } |
✓
best practice
Match the skeleton shape to the actual content layout. If your card has an image on the left, don't show a full-width image skeleton. The closer the skeleton matches the final layout, the less jarring the transition.
Table Skeleton
Skeleton rows and columns mimicking a data table while content loads from the server.
table-skeleton
Live
untitled.html
HTML
| 1 | <div class="table-sk"> |
| 2 | <div class="sk-header"> |
| 3 | <div class="sk-cell w20"> |
| 4 | </div> |
| 5 | <div class="sk-cell w30"> |
| 6 | </div> |
| 7 | <div class="sk-cell w25"> |
| 8 | </div> |
| 9 | <div class="sk-cell w15"> |
| 10 | </div> |
| 11 | </div> |
| 12 | <div class="sk-row"> |
| 13 | <div class="sk-cell w20"> |
| 14 | </div> |
| 15 | <div class="sk-cell w30"> |
| 16 | </div> |
| 17 | <div class="sk-cell w25"> |
| 18 | </div> |
| 19 | <div class="sk-cell w15"> |
| 20 | </div> |
| 21 | </div> |
| 22 | <div class="sk-row"> |
| 23 | <div class="sk-cell w20"> |
| 24 | </div> |
| 25 | <div class="sk-cell w30"> |
| 26 | </div> |
| 27 | <div class="sk-cell w25"> |
| 28 | </div> |
| 29 | <div class="sk-cell w15"> |
| 30 | </div> |
| 31 | </div> |
| 32 | <div class="sk-row"> |
| 33 | <div class="sk-cell w20"> |
| 34 | </div> |
| 35 | <div class="sk-cell w30"> |
| 36 | </div> |
| 37 | <div class="sk-cell w25"> |
| 38 | </div> |
| 39 | <div class="sk-cell w15"> |
| 40 | </div> |
| 41 | </div> |
| 42 | <div class="sk-row"> |
| 43 | <div class="sk-cell w20"> |
| 44 | </div> |
| 45 | <div class="sk-cell w30"> |
| 46 | </div> |
| 47 | <div class="sk-cell w25"> |
| 48 | </div> |
| 49 | <div class="sk-cell w15"> |
| 50 | </div> |
| 51 | </div> |
| 52 | </div> |
untitled.css
CSS
| 1 | .table-sk { |
| 2 | max-width:440px; |
| 3 | margin:16px auto; |
| 4 | border:1px solid #1A1A2E; |
| 5 | border-radius:8px; |
| 6 | overflow:hidden |
| 7 | } |
| 8 | .sk-header, |
| 9 | .sk-row { |
| 10 | display:flex; |
| 11 | gap:12px; |
| 12 | padding:12px 16px |
| 13 | } |
| 14 | .sk-header { |
| 15 | background:#0F0F1A; |
| 16 | border-bottom:1px solid #1A1A2E |
| 17 | } |
| 18 | .sk-row { |
| 19 | border-bottom:1px solid #12121E |
| 20 | } |
| 21 | .sk-row:last-child { |
| 22 | border-bottom:none |
| 23 | } |
| 24 | .sk-cell { |
| 25 | height:10px; |
| 26 | border-radius:5px; |
| 27 | background:linear-gradient(90deg, |
| 28 | #1A1A2E 25%, |
| 29 | #2A2A3E 50%, |
| 30 | #1A1A2E 75%); |
| 31 | background-size:200% 100%; |
| 32 | animation:shimmer 1.5s ease-in-out infinite |
| 33 | } |
| 34 | .w15 { |
| 35 | width:15% |
| 36 | } |
| 37 | .w20 { |
| 38 | width:20% |
| 39 | } |
| 40 | .w25 { |
| 41 | width:25% |
| 42 | } |
| 43 | .w30 { |
| 44 | width:30% |
| 45 | } |
| 46 | @keyframes shimmer { |
| 47 | 0% { |
| 48 | background-position:200% 0 |
| 49 | } |
| 50 | 100% { |
| 51 | background-position:-200% 0 |
| 52 | } |
| 53 | } |
Custom Shapes
Skeleton elements for buttons, badges, thumbnails, and circular shapes — build any layout.
shape-skeleton
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="sk-circle lg"> |
| 3 | </div> |
| 4 | <div class="sk-circle md"> |
| 5 | </div> |
| 6 | <div class="sk-circle sm"> |
| 7 | </div> |
| 8 | <div class="sk-rect"> |
| 9 | </div> |
| 10 | <div class="sk-pill"> |
| 11 | </div> |
| 12 | <div class="sk-btn-sk"> |
| 13 | </div> |
| 14 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | display:flex; |
| 3 | gap:16px; |
| 4 | align-items:center; |
| 5 | justify-content:center; |
| 6 | padding:32px |
| 7 | } |
| 8 | .sk-circle { |
| 9 | border-radius:50%; |
| 10 | background:linear-gradient(90deg, |
| 11 | #1A1A2E 25%, |
| 12 | #2A2A3E 50%, |
| 13 | #1A1A2E 75%); |
| 14 | background-size:200% 100%; |
| 15 | animation:shimmer 1.5s ease-in-out infinite; |
| 16 | flex-shrink:0 |
| 17 | } |
| 18 | .sk-circle.lg { |
| 19 | width:56px; |
| 20 | height:56px |
| 21 | } |
| 22 | .sk-circle.md { |
| 23 | width:40px; |
| 24 | height:40px |
| 25 | } |
| 26 | .sk-circle.sm { |
| 27 | width:28px; |
| 28 | height:28px |
| 29 | } |
| 30 | .sk-rect { |
| 31 | width:80px; |
| 32 | height:60px; |
| 33 | border-radius:8px; |
| 34 | background:linear-gradient(90deg, |
| 35 | #1A1A2E 25%, |
| 36 | #2A2A3E 50%, |
| 37 | #1A1A2E 75%); |
| 38 | background-size:200% 100%; |
| 39 | animation:shimmer 1.5s ease-in-out infinite |
| 40 | } |
| 41 | .sk-pill { |
| 42 | width:100px; |
| 43 | height:24px; |
| 44 | border-radius:12px; |
| 45 | background:linear-gradient(90deg, |
| 46 | #1A1A2E 25%, |
| 47 | #2A2A3E 50%, |
| 48 | #1A1A2E 75%); |
| 49 | background-size:200% 100%; |
| 50 | animation:shimmer 1.5s ease-in-out infinite |
| 51 | } |
| 52 | .sk-btn-sk { |
| 53 | width:90px; |
| 54 | height:36px; |
| 55 | border-radius:8px; |
| 56 | background:linear-gradient(90deg, |
| 57 | #1A1A2E 25%, |
| 58 | #2A2A3E 50%, |
| 59 | #1A1A2E 75%); |
| 60 | background-size:200% 100%; |
| 61 | animation:shimmer 1.5s ease-in-out infinite |
| 62 | } |
| 63 | @keyframes shimmer { |
| 64 | 0% { |
| 65 | background-position:200% 0 |
| 66 | } |
| 67 | 100% { |
| 68 | background-position:-200% 0 |
| 69 | } |
| 70 | } |
Staggered Animation
Skeleton lines with staggered animation delays create a cascading shimmer effect that feels more natural.
staggered-skeleton
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="row"> |
| 3 | <div class="sk-circle"> |
| 4 | </div> |
| 5 | <div class="lines"> |
| 6 | <div class="sk-line w50 d1"> |
| 7 | </div> |
| 8 | <div class="sk-line w80 d2"> |
| 9 | </div> |
| 10 | </div> |
| 11 | </div> |
| 12 | <div class="row"> |
| 13 | <div class="sk-circle d1"> |
| 14 | </div> |
| 15 | <div class="lines"> |
| 16 | <div class="sk-line w60 d2"> |
| 17 | </div> |
| 18 | <div class="sk-line w45 d3"> |
| 19 | </div> |
| 20 | </div> |
| 21 | </div> |
| 22 | <div class="row"> |
| 23 | <div class="sk-circle d2"> |
| 24 | </div> |
| 25 | <div class="lines"> |
| 26 | <div class="sk-line w40 d3"> |
| 27 | </div> |
| 28 | <div class="sk-line w70 d4"> |
| 29 | </div> |
| 30 | </div> |
| 31 | </div> |
| 32 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | max-width:380px; |
| 3 | margin:16px auto; |
| 4 | padding:0 16px |
| 5 | } |
| 6 | .row { |
| 7 | display:flex; |
| 8 | align-items:center; |
| 9 | gap:12px; |
| 10 | padding:14px 0; |
| 11 | border-bottom:1px solid #1A1A2E |
| 12 | } |
| 13 | .sk-circle { |
| 14 | width:42px; |
| 15 | height:42px; |
| 16 | border-radius:50%; |
| 17 | flex-shrink:0; |
| 18 | background:linear-gradient(90deg, |
| 19 | #1A1A2E 25%, |
| 20 | #2A2A3E 50%, |
| 21 | #1A1A2E 75%); |
| 22 | background-size:200% 100%; |
| 23 | animation:shimmer 1.5s ease-in-out infinite |
| 24 | } |
| 25 | .lines { |
| 26 | display:flex; |
| 27 | flex-direction:column; |
| 28 | gap:8px; |
| 29 | flex:1 |
| 30 | } |
| 31 | .sk-line { |
| 32 | height:10px; |
| 33 | border-radius:5px; |
| 34 | background:linear-gradient(90deg, |
| 35 | #1A1A2E 25%, |
| 36 | #2A2A3E 50%, |
| 37 | #1A1A2E 75%); |
| 38 | background-size:200% 100%; |
| 39 | animation:shimmer 1.5s ease-in-out infinite |
| 40 | } |
| 41 | .w40 { |
| 42 | width:40% |
| 43 | } |
| 44 | .w45 { |
| 45 | width:45% |
| 46 | } |
| 47 | .w50 { |
| 48 | width:50% |
| 49 | } |
| 50 | .w60 { |
| 51 | width:60% |
| 52 | } |
| 53 | .w70 { |
| 54 | width:70% |
| 55 | } |
| 56 | .w80 { |
| 57 | width:80% |
| 58 | } |
| 59 | .d1 { |
| 60 | animation-delay:.1s |
| 61 | } |
| 62 | .d2 { |
| 63 | animation-delay:.2s |
| 64 | } |
| 65 | .d3 { |
| 66 | animation-delay:.3s |
| 67 | } |
| 68 | .d4 { |
| 69 | animation-delay:.4s |
| 70 | } |
| 71 | @keyframes shimmer { |
| 72 | 0% { |
| 73 | background-position:200% 0 |
| 74 | } |
| 75 | 100% { |
| 76 | background-position:-200% 0 |
| 77 | } |
| 78 | } |
🔥
pro tip
Add staggered animation-delay values (0.1s increments) to each skeleton element. This creates a wave effect that's more visually pleasing than all elements shimmering in sync.
Profile Card Skeleton
Complete skeleton for a profile card with cover image, avatar, name, bio, and stats.
profile-skeleton
Live
untitled.html
HTML
| 1 | <div class="profile-sk"> |
| 2 | <div class="sk-cover"> |
| 3 | </div> |
| 4 | <div class="sk-avatar-wrap"> |
| 5 | <div class="sk-avatar"> |
| 6 | </div> |
| 7 | </div> |
| 8 | <div class="profile-body"> |
| 9 | <div class="sk-line w40 centered"> |
| 10 | </div> |
| 11 | <div class="sk-line w60 centered sm"> |
| 12 | </div> |
| 13 | <div class="sk-line w100"> |
| 14 | </div> |
| 15 | <div class="sk-line w90"> |
| 16 | </div> |
| 17 | <div class="sk-line w70"> |
| 18 | </div> |
| 19 | <div class="sk-stats"> |
| 20 | <div class="sk-stat"> |
| 21 | <div class="sk-line w100"> |
| 22 | </div> |
| 23 | <div class="sk-line w60 sm"> |
| 24 | </div> |
| 25 | </div> |
| 26 | <div class="sk-stat"> |
| 27 | <div class="sk-line w100"> |
| 28 | </div> |
| 29 | <div class="sk-line w50 sm"> |
| 30 | </div> |
| 31 | </div> |
| 32 | <div class="sk-stat"> |
| 33 | <div class="sk-line w100"> |
| 34 | </div> |
| 35 | <div class="sk-line w70 sm"> |
| 36 | </div> |
| 37 | </div> |
| 38 | </div> |
| 39 | </div> |
| 40 | </div> |
untitled.css
CSS
| 1 | .profile-sk { |
| 2 | max-width:300px; |
| 3 | margin:16px auto; |
| 4 | border-radius:12px; |
| 5 | overflow:hidden; |
| 6 | border:1px solid #1A1A2E; |
| 7 | background:#0A0A0F |
| 8 | } |
| 9 | .sk-cover { |
| 10 | width:100%; |
| 11 | height:100px; |
| 12 | background:linear-gradient(90deg, |
| 13 | #1A1A2E 25%, |
| 14 | #252538 50%, |
| 15 | #1A1A2E 75%); |
| 16 | background-size:200% 100%; |
| 17 | animation:shimmer 1.5s ease-in-out infinite |
| 18 | } |
| 19 | .sk-avatar-wrap { |
| 20 | display:flex; |
| 21 | justify-content:center; |
| 22 | margin-top:-28px |
| 23 | } |
| 24 | .sk-avatar { |
| 25 | width:56px; |
| 26 | height:56px; |
| 27 | border-radius:50%; |
| 28 | border:3px solid #0A0A0F; |
| 29 | background:linear-gradient(90deg, |
| 30 | #1A1A2E 25%, |
| 31 | #2A2A3E 50%, |
| 32 | #1A1A2E 75%); |
| 33 | background-size:200% 100%; |
| 34 | animation:shimmer 1.5s ease-in-out infinite |
| 35 | } |
| 36 | .profile-body { |
| 37 | padding:16px; |
| 38 | display:flex; |
| 39 | flex-direction:column; |
| 40 | align-items:center; |
| 41 | gap:10px |
| 42 | } |
| 43 | .sk-line { |
| 44 | height:10px; |
| 45 | border-radius:5px; |
| 46 | background:linear-gradient(90deg, |
| 47 | #1A1A2E 25%, |
| 48 | #2A2A3E 50%, |
| 49 | #1A1A2E 75%); |
| 50 | background-size:200% 100%; |
| 51 | animation:shimmer 1.5s ease-in-out infinite |
| 52 | } |
| 53 | .centered { |
| 54 | align-self:center |
| 55 | } |
| 56 | .w40 { |
| 57 | width:40% |
| 58 | } |
| 59 | .w50 { |
| 60 | width:50% |
| 61 | } |
| 62 | .w60 { |
| 63 | width:60% |
| 64 | } |
| 65 | .w70 { |
| 66 | width:70% |
| 67 | } |
| 68 | .w90 { |
| 69 | width:90% |
| 70 | } |
| 71 | .w100 { |
| 72 | width:100% |
| 73 | } |
| 74 | .sm { |
| 75 | height:8px; |
| 76 | border-radius:4px |
| 77 | } |
| 78 | .sk-stats { |
| 79 | display:flex; |
| 80 | gap:20px; |
| 81 | margin-top:8px; |
| 82 | width:100% |
| 83 | } |
| 84 | .sk-stat { |
| 85 | flex:1; |
| 86 | display:flex; |
| 87 | flex-direction:column; |
| 88 | gap:6px; |
| 89 | align-items:center |
| 90 | } |
| 91 | @keyframes shimmer { |
| 92 | 0% { |
| 93 | background-position:200% 0 |
| 94 | } |
| 95 | 100% { |
| 96 | background-position:-200% 0 |
| 97 | } |
| 98 | } |
📝
note
Profile card skeletons need a negative margin on the avatar to overlap the cover image. Always account for this layout offset in the skeleton so it matches the final rendered card exactly.
Feed Skeleton
Skeleton for a social media feed post with user info, text content, image placeholder, and action buttons.
feed-skeleton
Live
untitled.html
HTML
| 1 | <div class="feed-sk"> |
| 2 | <div class="post-sk"> |
| 3 | <div class="post-header"> |
| 4 | <div class="sk-circle sm"> |
| 5 | </div> |
| 6 | <div class="hdr-lines"> |
| 7 | <div class="sk-line w40"> |
| 8 | </div> |
| 9 | <div class="sk-line w25 xs"> |
| 10 | </div> |
| 11 | </div> |
| 12 | </div> |
| 13 | <div class="post-body"> |
| 14 | <div class="sk-line w100"> |
| 15 | </div> |
| 16 | <div class="sk-line w85"> |
| 17 | </div> |
| 18 | <div class="sk-line w60"> |
| 19 | </div> |
| 20 | </div> |
| 21 | <div class="sk-post-img"> |
| 22 | </div> |
| 23 | <div class="post-actions"> |
| 24 | <div class="sk-action"> |
| 25 | </div> |
| 26 | <div class="sk-action"> |
| 27 | </div> |
| 28 | <div class="sk-action"> |
| 29 | </div> |
| 30 | </div> |
| 31 | </div> |
| 32 | </div> |
untitled.css
CSS
| 1 | .feed-sk { |
| 2 | max-width:380px; |
| 3 | margin:16px auto; |
| 4 | border:1px solid #1A1A2E; |
| 5 | border-radius:12px; |
| 6 | overflow:hidden; |
| 7 | background:#0A0A0F; |
| 8 | padding:16px |
| 9 | } |
| 10 | .post-header { |
| 11 | display:flex; |
| 12 | align-items:center; |
| 13 | gap:10px; |
| 14 | margin-bottom:14px |
| 15 | } |
| 16 | .sk-circle { |
| 17 | border-radius:50%; |
| 18 | flex-shrink:0; |
| 19 | background:linear-gradient(90deg, |
| 20 | #1A1A2E 25%, |
| 21 | #2A2A3E 50%, |
| 22 | #1A1A2E 75%); |
| 23 | background-size:200% 100%; |
| 24 | animation:shimmer 1.5s ease-in-out infinite |
| 25 | } |
| 26 | .sk-circle.sm { |
| 27 | width:36px; |
| 28 | height:36px |
| 29 | } |
| 30 | .hdr-lines { |
| 31 | display:flex; |
| 32 | flex-direction:column; |
| 33 | gap:6px; |
| 34 | flex:1 |
| 35 | } |
| 36 | .sk-line { |
| 37 | height:10px; |
| 38 | border-radius:5px; |
| 39 | background:linear-gradient(90deg, |
| 40 | #1A1A2E 25%, |
| 41 | #2A2A3E 50%, |
| 42 | #1A1A2E 75%); |
| 43 | background-size:200% 100%; |
| 44 | animation:shimmer 1.5s ease-in-out infinite |
| 45 | } |
| 46 | .xs { |
| 47 | height:8px; |
| 48 | border-radius:4px |
| 49 | } |
| 50 | .w25 { |
| 51 | width:25% |
| 52 | } |
| 53 | .w40 { |
| 54 | width:40% |
| 55 | } |
| 56 | .w60 { |
| 57 | width:60% |
| 58 | } |
| 59 | .w85 { |
| 60 | width:85% |
| 61 | } |
| 62 | .w100 { |
| 63 | width:100% |
| 64 | } |
| 65 | .post-body { |
| 66 | display:flex; |
| 67 | flex-direction:column; |
| 68 | gap:8px; |
| 69 | margin-bottom:14px |
| 70 | } |
| 71 | .sk-post-img { |
| 72 | width:100%; |
| 73 | height:160px; |
| 74 | border-radius:8px; |
| 75 | background:linear-gradient(90deg, |
| 76 | #1A1A2E 25%, |
| 77 | #252538 50%, |
| 78 | #1A1A2E 75%); |
| 79 | background-size:200% 100%; |
| 80 | animation:shimmer 1.5s ease-in-out infinite; |
| 81 | margin-bottom:14px |
| 82 | } |
| 83 | .post-actions { |
| 84 | display:flex; |
| 85 | gap:16px; |
| 86 | padding-top:12px; |
| 87 | border-top:1px solid #1A1A2E |
| 88 | } |
| 89 | .sk-action { |
| 90 | height:10px; |
| 91 | width:50px; |
| 92 | border-radius:5px; |
| 93 | background:linear-gradient(90deg, |
| 94 | #1A1A2E 25%, |
| 95 | #2A2A3E 50%, |
| 96 | #1A1A2E 75%); |
| 97 | background-size:200% 100%; |
| 98 | animation:shimmer 1.5s ease-in-out infinite |
| 99 | } |
| 100 | @keyframes shimmer { |
| 101 | 0% { |
| 102 | background-position:200% 0 |
| 103 | } |
| 104 | 100% { |
| 105 | background-position:-200% 0 |
| 106 | } |
| 107 | } |
✓
best practice
Always include the same structural elements in your skeleton that appear in the real content — header, body, image, actions. Users subconsciously recognize the layout pattern, making the transition from skeleton to content feel seamless.