|$ curl https://forge-ai.dev/api/markdown?path=docs/components/skeleton

$cat docs/skeleton-loaders.md

updated Recently·18 min read·published

Skeleton Loaders

◆CSS◆HTML◆Tailwind◆Bootstrap◆UI◆Intermediate🎯Free Tools

Introduction

Skeleton loaders are empty placeholders that mirror the final layout while content loads. This guide covers production-ready skeleton patterns in plain HTML/CSS, Tailwind CSS, and Bootstrap — including text, avatars, cards, tables, media, forms, stats, and accessibility.

ℹ

info

Match the skeleton shape to the real content as closely as possible. When the layout does not change after data arrives, the transition feels instant rather than jarring.

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>

preview

ℹ

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.html

HTML

1	<style>
2	.placeholder{background-color:#1A1A2E!important;opacity:1!important;animation:placeholder-glow 2s ease-in-out infinite!important}
3	</style>
4	<div class="container px-3 bg-dark" style="max-width:400px">
5	<div class="d-flex align-items-center gap-3 py-3 border-bottom border-secondary">
6	<div class="placeholder-glow">
7	<span class="placeholder rounded-circle flex-shrink-0" style="width:40px;height:40px">
8	</span>
9	</div>
10	<div class="d-flex flex-column gap-2 flex-fill">
11	<span class="placeholder rounded d-block" style="width:40%;height:10px">
12	</span>
13	<span class="placeholder rounded d-block" style="width:70%;height:10px">
14	</span>
15	</div>
16	</div>
17	<div class="d-flex align-items-center gap-3 py-3 border-bottom border-secondary">
18	<div class="placeholder-glow">
19	<span class="placeholder rounded-circle flex-shrink-0" style="width:40px;height:40px">
20	</span>
21	</div>
22	<div class="d-flex flex-column gap-2 flex-fill">
23	<span class="placeholder rounded d-block" style="width:35%;height:10px">
24	</span>
25	<span class="placeholder rounded d-block" style="width:60%;height:10px">
26	</span>
27	</div>
28	</div>
29	<div class="d-flex align-items-center gap-3 py-3 border-bottom border-secondary">
30	<div class="placeholder-glow">
31	<span class="placeholder rounded-circle flex-shrink-0" style="width:40px;height:40px">
32	</span>
33	</div>
34	<div class="d-flex flex-column gap-2 flex-fill">
35	<span class="placeholder rounded d-block" style="width:50%;height:10px">
36	</span>
37	<span class="placeholder rounded d-block" style="width:80%;height:10px">
38	</span>
39	</div>
40	</div>
41	<div class="d-flex align-items-center gap-3 py-3 border-bottom border-secondary">
42	<div class="placeholder-glow">
43	<span class="placeholder rounded-circle flex-shrink-0" style="width:40px;height:40px">
44	</span>
45	</div>
46	<div class="d-flex flex-column gap-2 flex-fill">
47	<span class="placeholder rounded d-block" style="width:30%;height:10px">
48	</span>
49	<span class="placeholder rounded d-block" style="width:55%;height:10px">
50	</span>
51	</div>
52	</div>
53	</div>

preview

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>

preview

✓

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.

Image & Media Grid

A responsive grid of media placeholders for galleries, video thumbnails, or product images.

image-media-skeleton

Live

untitled.html

HTML

1	<div class="gallery">
2	<div class="sk-img">
3	</div>
4	<div class="sk-img">
5	</div>
6	<div class="sk-img">
7	</div>
8	<div class="sk-img">
9	</div>
10	</div>

preview

Form Inputs

Skeleton labels and input fields for login, checkout, or settings forms while fields initialize.

form-skeleton

Live

untitled.html

HTML

1	<div class="form-sk">
2	<div class="field">
3	<div class="sk-label w30">
4	</div>
5	<div class="sk-input w100">
6	</div>
7	</div>
8	<div class="field">
9	<div class="sk-label w30">
10	</div>
11	<div class="sk-input w100">
12	</div>
13	</div>
14	<div class="field">
15	<div class="sk-label w30">
16	</div>
17	<div class="sk-input w100">
18	</div>
19	</div>
20	<div class="sk-btn">
21	</div>
22	</div>

preview

📝

note

Form skeletons should preserve label-to-field spacing and input heights. If real inputs use helper text or error messages, leave room for those regions so the form does not jump when validation messages appear.

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.html

HTML

1	<style>
2	.placeholder{background-color:#1A1A2E!important;opacity:1!important;animation:placeholder-glow 2s ease-in-out infinite!important}
3	</style>
4	<div class="table-responsive border border-secondary rounded mx-auto" style="max-width:440px">
5	<table class="table table-dark table-borderless mb-0">
6	<thead>
7	<tr class="border-bottom border-secondary">
8	<th>
9	<span class="placeholder rounded d-block" style="width:80%;height:10px">
10	</span>
11	</th>
12	<th>
13	<span class="placeholder rounded d-block" style="width:80%;height:10px">
14	</span>
15	</th>
16	<th>
17	<span class="placeholder rounded d-block" style="width:80%;height:10px">
18	</span>
19	</th>
20	<th>
21	<span class="placeholder rounded d-block" style="width:80%;height:10px">
22	</span>
23	</th>
24	</tr>
25	</thead>
26	<tbody>
27	<tr class="border-bottom border-secondary">
28	<td>
29	<span class="placeholder rounded d-block" style="width:80%;height:10px">
30	</span>
31	</td>
32	<td>
33	<span class="placeholder rounded d-block" style="width:80%;height:10px">
34	</span>
35	</td>
36	<td>
37	<span class="placeholder rounded d-block" style="width:80%;height:10px">
38	</span>
39	</td>
40	<td>
41	<span class="placeholder rounded d-block" style="width:80%;height:10px">
42	</span>
43	</td>
44	</tr>
45	<tr class="border-bottom border-secondary">
46	<td>
47	<span class="placeholder rounded d-block" style="width:80%;height:10px">
48	</span>
49	</td>
50	<td>
51	<span class="placeholder rounded d-block" style="width:80%;height:10px">
52	</span>
53	</td>
54	<td>
55	<span class="placeholder rounded d-block" style="width:80%;height:10px">
56	</span>
57	</td>
58	<td>
59	<span class="placeholder rounded d-block" style="width:80%;height:10px">
60	</span>
61	</td>
62	</tr>
63	<tr class="border-bottom border-secondary">
64	<td>
65	<span class="placeholder rounded d-block" style="width:80%;height:10px">
66	</span>
67	</td>
68	<td>
69	<span class="placeholder rounded d-block" style="width:80%;height:10px">
70	</span>
71	</td>
72	<td>
73	<span class="placeholder rounded d-block" style="width:80%;height:10px">
74	</span>
75	</td>
76	<td>
77	<span class="placeholder rounded d-block" style="width:80%;height:10px">
78	</span>
79	</td>
80	</tr>
81	</tbody>
82	</table>
83	</div>

preview

Dashboard Stats

Metric cards for dashboards — labels, large values, and micro-trends rendered as skeleton blocks.

stats-skeleton

Live

untitled.html

HTML

1	<div class="stats">
2	<div class="stat-card">
3	<div class="sk-line w40">
4	</div>
5	<div class="sk-num w60">
6	</div>
7	<div class="sk-line w80">
8	</div>
9	</div>
10	<div class="stat-card">
11	<div class="sk-line w40">
12	</div>
13	<div class="sk-num w50">
14	</div>
15	<div class="sk-line w70">
16	</div>
17	</div>
18	<div class="stat-card">
19	<div class="sk-line w40">
20	</div>
21	<div class="sk-num w70">
22	</div>
23	<div class="sk-line w60">
24	</div>
25	</div>
26	</div>

preview

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>

preview

Code Block

A terminal-style skeleton for documentation, logs, or snippet loaders with indented lines.

code-skeleton

Live

untitled.html

HTML

1	<div class="code-sk">
2	<div class="sk-line">
3	</div>
4	<div class="sk-line indent">
5	</div>
6	<div class="sk-line indent">
7	</div>
8	<div class="sk-line">
9	</div>
10	<div class="sk-line indent">
11	</div>
12	</div>

preview

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>

preview

🔥

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>

preview

📝

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>

preview

✓

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.

Reduced Motion

A static skeleton for users who prefer reduced motion, or as a fallback while shimmer keyframes load.

reduced-motion-skeleton

Live

untitled.html

HTML

1	<div class="wrap">
2	<div class="sk-line w100">
3	</div>
4	<div class="sk-line w80">
5	</div>
6	<div class="sk-line w60">
7	</div>
8	</div>

preview

⚠

warning

Respect prefers-reduced-motion. Replace shimmer animations with static placeholders for users who have disabled motion, or expose a user preference toggle in your app settings.

Accessibility

Skeletons are visual by nature, but screen-reader users and keyboard navigators still need context. Treat loaders as temporary state and avoid trapping focus or announcing every placeholder.

Wrap skeleton regions with aria-busy="true" on the live region or container while loading.
Use aria-live="polite" so finished content is announced once, not placeholder shapes.
Do not focus skeleton elements; keep focus on the trigger or move it to the loaded content.
Honor prefers-reduced-motion by disabling shimmer animations.
Ensure skeleton colors meet contrast ratios against the background, even while animated.
Provide a text fallback or label for any data that may fail to load.

Community

Get help on Slack, Discord or VIP

Stuck on a guide? Join the community and ask.

Join Slack Join Discord Kaundal VIP

X GitHub YouTube Instagram Facebook Discord Slack Telegram Buy me a coffee Ko-fi Sponsor

1	.gallery {
2	display:grid;
3	grid-template-columns:repeat(2,
4	1fr);
5	gap:12px;
6	max-width:360px;
7	margin:16px auto;
8	padding:16px
9	}
10	.sk-img {
11	aspect-ratio:16/9;
12	border-radius:8px;
13	background:linear-gradient(90deg,
14	#1A1A2E 25%,
15	#252538 50%,
16	#1A1A2E 75%);
17	background-size:200% 100%;
18	animation:shimmer 1.5s ease-in-out infinite
19	}
20	@keyframes shimmer {
21	0% {
22	background-position:200% 0
23	}
24	100% {
25	background-position:-200% 0
26	}
27	}

1	.code-sk {
2	max-width:420px;
3	margin:16px auto;
4	border-radius:8px;
5	background:#0F0F1A;
6	border:1px solid #1A1A2E;
7	padding:16px;
8	display:flex;
9	flex-direction:column;
10	gap:8px
11	}
12	.sk-line {
13	height:10px;
14	border-radius:5px;
15	background:linear-gradient(90deg,
16	#1A1A2E 25%,
17	#2A2A3E 50%,
18	#1A1A2E 75%);
19	background-size:200% 100%;
20	animation:shimmer 1.5s ease-in-out infinite
21	}
22	.sk-line.indent {
23	margin-left:24px;
24	width:calc(100% - 24px)
25	}
26	@keyframes shimmer {
27	0% {
28	background-position:200% 0
29	}
30	100% {
31	background-position:-200% 0
32	}
33	}

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	}

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	}

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:#1A1A2E
13	}

1	<style>
2	.shimmer{background:linear-gradient(90deg,#1A1A2E 25%,#2A2A3E 50%,#1A1A2E 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
3	</style>
4	<div class="max-w-md mx-auto flex flex-col gap-2.5 p-6 bg-[#0A0A0A]">
5	<div class="shimmer h-3 rounded-md w-full">
6	</div>
7	<div class="shimmer h-3 rounded-md" style="width:95%">
8	</div>
9	<div class="shimmer h-3 rounded-md" style="width:80%">
10	</div>
11	<div class="shimmer h-3 rounded-md" style="width:60%">
12	</div>
13	</div>

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	}

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	}

1	.form-sk {
2	max-width:360px;
3	margin:16px auto;
4	display:flex;
5	flex-direction:column;
6	gap:16px;
7	padding:24px
8	}
9	.field {
10	display:flex;
11	flex-direction:column;
12	gap:8px
13	}
14	.sk-label {
15	height:10px;
16	border-radius:5px;
17	background:linear-gradient(90deg,
18	#1A1A2E 25%,
19	#2A2A3E 50%,
20	#1A1A2E 75%);
21	background-size:200% 100%;
22	animation:shimmer 1.5s ease-in-out infinite
23	}
24	.sk-input {
25	height:40px;
26	border-radius:8px;
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	.sk-btn {
35	height:40px;
36	width:120px;
37	border-radius:8px;
38	background:linear-gradient(90deg,
39	#1A1A2E 25%,
40	#2A2A3E 50%,
41	#1A1A2E 75%);
42	background-size:200% 100%;
43	animation:shimmer 1.5s ease-in-out infinite
44	}
45	.w30 {
46	width:30%
47	}
48	.w100 {
49	width:100%
50	}
51	@keyframes shimmer {
52	0% {
53	background-position:200% 0
54	}
55	100% {
56	background-position:-200% 0
57	}
58	}

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	}

1	.stats {
2	display:grid;
3	grid-template-columns:repeat(3,
4	1fr);
5	gap:12px;
6	max-width:520px;
7	margin:16px auto;
8	padding:16px
9	}
10	.stat-card {
11	border:1px solid #1A1A2E;
12	border-radius:12px;
13	padding:16px;
14	background:#0A0A0F;
15	display:flex;
16	flex-direction:column;
17	gap:10px
18	}
19	.sk-line {
20	height:10px;
21	border-radius:5px;
22	background:linear-gradient(90deg,
23	#1A1A2E 25%,
24	#2A2A3E 50%,
25	#1A1A2E 75%);
26	background-size:200% 100%;
27	animation:shimmer 1.5s ease-in-out infinite
28	}
29	.sk-num {
30	height:28px;
31	border-radius:8px;
32	background:linear-gradient(90deg,
33	#1A1A2E 25%,
34	#2A2A3E 50%,
35	#1A1A2E 75%);
36	background-size:200% 100%;
37	animation:shimmer 1.5s ease-in-out infinite
38	}
39	.w40 {
40	width:40%
41	}
42	.w50 {
43	width:50%
44	}
45	.w60 {
46	width:60%
47	}
48	.w70 {
49	width:70%
50	}
51	.w80 {
52	width:80%
53	}
54	@keyframes shimmer {
55	0% {
56	background-position:200% 0
57	}
58	100% {
59	background-position:-200% 0
60	}
61	}

1	<div class="max-w-md mx-auto flex flex-col gap-2.5 p-6 bg-[#0A0A0A]">
2	<div class="h-3 rounded-md w-full bg-[#1A1A2E]">
3	</div>
4	<div class="h-3 rounded-md w-4/5 bg-[#1A1A2E]">
5	</div>
6	<div class="h-3 rounded-md w-3/5 bg-[#1A1A2E]">
7	</div>
8	</div>