Content Shimmer Wave
A full-width shimmer wave overlay that sweeps across a container with a translucent highlight band. Ideal for hero sections, image placeholders, or large content blocks that are still loading.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
shimmerwaveoverlayloading
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A full-width shimmer wave overlay for content sections that are still loading.
CSS
css
.box { width: 240px; height: 120px; background: #1c1c1e; border-radius: 8px; position: relative; overflow: hidden; }
.box::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 10%, rgba(255,255,255,0.08) 10%, rgba(255,255,255,0.08) 35%, transparent 35%); animation: wave 1.8s ease-in-out infinite; }
@keyframes wave { 0%{transform: translateX(-100%)} 100%{transform: translateX(100%)} }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }HTML
html
<div class="box"></div>Full Source
html
<!DOCTYPE html>
<html><head><style>
.box { width: 240px; height: 120px; background: #1c1c1e; border-radius: 8px; position: relative; overflow: hidden; }
.box::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 10%, rgba(255,255,255,0.08) 10%, rgba(255,255,255,0.08) 35%, transparent 35%); animation: wave 1.8s ease-in-out infinite; }
@keyframes wave { 0%{transform: translateX(-100%)} 100%{transform: translateX(100%)} }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
</style></head><body><div class="box"></div></body></html>