Text Shimmer
No library Intermediate
The word "Loading" rendered in uppercase with a bright spotlight sweeping across it via background-clip:text — a text-as-canvas shimmer effect. Pure CSS, no dependencies.
The word "Loading" rendered in uppercase with a bright spotlight sweeping across it via background-clip:text — a text-as-canvas shimmer effect. Pure CSS, no dependencies.
Goal: Create a "Text Shimmer" loader animation.
Visual behavior: The word "LOADING" in uppercase, bold, wide letter-spacing. The text itself is invisible — instead a gradient fills it via background-clip:text. The gradient is mostly dim white on both sides with a bright white spotlight in the center. The background-position animates left to right on repeat, so the spotlight sweeps across the letters continuously.
Technique: background with a linear-gradient (dim → bright → dim, 200% wide), background-size: 200% auto, and background-clip: text / -webkit-text-fill-color: transparent. Keyframe animates background-position from -200% center to 200% center over ~1.8s linear infinite.
Accessibility: The visible text span should be aria-hidden; the wrapper element carries aria-label="Loading" for screen readers. Under prefers-reduced-motion, remove the animation and show the text at low static opacity.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.