Skeleton Card
A card-layout skeleton placeholder with multiple shimmer blocks arranged to mimic a real card. Perfect for loading states in product grids, blog feeds, or any card-based layout.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
skeletoncardplaceholderlayout
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A card-layout skeleton placeholder with shimmer blocks for content loading states.
CSS
css
.card { width: 240px; padding: 20px; background: #18181b; border-radius: 12px; }
.card .line { height: 12px; background: linear-gradient(90deg,#27272a 0%,#3f3f46 0%,#3f3f46 30%,#27272a 30%); background-size: 200% 100%; border-radius: 4px; animation: sh 1.5s ease-in-out infinite; }
.card .line.short { width: 60%; margin-top: 12px; }
.card .line:first-child { width: 40%; }
@keyframes sh { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }HTML
html
<div class="card"><div class="line"></div><div class="line short"></div><div class="line short"></div></div>Full Source
html
<!DOCTYPE html>
<html><head><style>
.card { width: 240px; padding: 20px; background: #18181b; border-radius: 12px; }
.card .line { height: 12px; background: linear-gradient(90deg,#27272a 0%,#3f3f46 0%,#3f3f46 30%,#27272a 30%); background-size: 200% 100%; border-radius: 4px; animation: sh 1.5s ease-in-out infinite; }
.card .line.short { width: 60%; margin-top: 12px; }
.card .line:first-child { width: 40%; }
@keyframes sh { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
</style></head><body>
<div class="card"><div class="line"></div><div class="line short"></div><div class="line short"></div></div>
</body></html>