Skeleton Text Blocks
Multiple text-line shimmer placeholders arranged at varying widths to mimic paragraph content. Use for article previews, comment sections, or any text-heavy area that loads asynchronously.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
skeletontextlinesplaceholder
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
Multiple text-line shimmer placeholders for paragraph or list content loading.
CSS
css
.block { width: 280px; }
.block span { display: block; height: 12px; background: linear-gradient(90deg,#27272a 0%,#3f3f46 0%,#3f3f46 28%,#27272a 28%); background-size: 200% 100%; border-radius: 4px; animation: sh 1.5s ease-in-out infinite; margin-bottom: 8px; }
.block span:nth-child(1){width:100%}.block span:nth-child(2){width:95%}.block span:nth-child(3){width:88%}.block span:nth-child(4){width:70%}
@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="block"><span></span><span></span><span></span><span></span></div>Full Source
html
<!DOCTYPE html>
<html><head><style>
.block { width: 280px; }
.block span { display: block; height: 12px; background: linear-gradient(90deg,#27272a 0%,#3f3f46 0%,#3f3f46 28%,#27272a 28%); background-size: 200% 100%; border-radius: 4px; animation: sh 1.5s ease-in-out infinite; margin-bottom: 8px; }
.block span:nth-child(1){width:100%}.block span:nth-child(2){width:95%}.block span:nth-child(3){width:88%}.block span:nth-child(4){width:70%}
@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="block"><span></span><span></span><span></span><span></span></div></body></html>