Shimmer
Elegant shimmer animation effect for loading states, skeleton screens, and highlighting important content.
Pro features
What the Pro version adds to this component.
Shimmer Animation
Smooth sweep animation effect
Pure CSS Animation
CSS keyframe-driven sweep, no JavaScript runtime
Duration Control
Customize animation timing
Color Control
Adjust shimmer color and opacity
Width Control
Set shimmer sweep width
Direction Control
Four sweep directions: ltr, rtl, ttb, btt
Installation
Install via CLI
npx @moontra/moonui-cli add shimmerUsage
Premium Feature
Unlock advanced analytics and insights
Examples
Loading Skeleton
Content loading placeholder with shimmer effect
Premium Card
Highlight premium features with shimmer
Call-to-Action Button
Eye-catching CTA with shimmer animation
Product Card Skeleton
E-commerce product loading state
Notification Badge
Animated notification with shimmer
Stats Card
Dashboard metric with shimmer highlight
Credit Card
Premium payment method display
Fast Shimmer
Quick shimmer for active loading states
Sweep Directions
The direction prop controls the sweep axis: ltr and rtl move horizontally, ttb and btt move vertically.
Finite Repeat
Pass a number to repeat (instead of the default 'infinite') to run a fixed number of sweeps, then the animation stops — useful for a one-off confirmation rather than a perpetual loading loop.
Toggle Shimmer
Flip active off to remove the animated sweep layer entirely (not just pause it visually) — handy for stopping a sync indicator once the work is done.