Overview
A sleek skeleton loading component designed for vertical lists such as feeds, menus, or cards. Built with Framer Motion and Tailwind CSS, it animates rows from top to bottom with subtle opacity and movement, enhanced by gradient fades for a premium loading experience.
Where to Use
- Feed and list loading states
- Sidebar or menu placeholders
- Dashboard content loading
- Search result skeletons
- Mobile-style list loaders
Why Use This Component
- Visually communicates loading progress
- Smooth infinite animation loop
- Elegant top and bottom fade masking
- No layout shift when content loads
- Highly reusable across list-based UIs
Built With
ReactTailwind CSSFramer Motion