Skeleton
A shimmer-style skeleton placeholder bar that sweeps a highlight across a neutral surface. Use it as a lightweight content placeholder while data loads to reduce perceived wait times.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
skeletonshimmerplaceholderloading
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A shimmer-style skeleton placeholder to show while content is loading.
CSS
css
.skeleton {
width: 200px;
height: 20px;
background: linear-gradient(90deg, #27272a 0%, #3f3f46 0%, #3f3f46 25%, #27272a 25%);
background-size: 200% 100%;
animation: shimmer 1.5s ease-in-out infinite;
border-radius: 4px;
}
@keyframes shimmer {
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="skeleton"></div>Full Source
html
<!DOCTYPE html>
<html>
<head>
<style>
.skeleton {
width: 200px;
height: 20px;
background: linear-gradient(90deg, #27272a 0%, #3f3f46 0%, #3f3f46 25%, #27272a 25%);
background-size: 200% 100%;
animation: shimmer 1.5s ease-in-out infinite;
border-radius: 4px;
}
@keyframes shimmer {
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="skeleton"></div>
</body>
</html>