Feedback
Loading Skeleton
A loading skeleton screen for cards, tables, and content placeholders with shimmer animation.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultybeginner
English Prompt
Create a loading skeleton screen for a dashboard page. Include a skeleton navbar, 4 stat cards with placeholder numbers, a large chart placeholder, and a data table placeholder with 5 rows. Use shadcn/ui Skeleton component and Tailwind CSS. Add a shimmer/pulse animation and ensure the skeleton layout matches the real content dimensions to avoid layout shift.
Chinese Prompt
为仪表盘页面创建一个加载骨架屏。包含骨架导航栏、4 个带占位数字的统计卡片、一个大型图表占位符和 5 行数据表格占位符。使用 shadcn/ui Skeleton 组件和 Tailwind CSS。添加闪光/脉冲动画，并确保骨架布局与真实内容尺寸一致以避免布局偏移。
Overview
A skeleton loading pattern for dashboard-style pages. Reduces perceived load time and prevents layout shifts.
Features
- Skeleton navbar
- 4 stat card placeholders
- Chart placeholder
- Data table placeholder
- Shimmer/pulse animation
- Layout matches real content
Usage
Copy the prompt into v0 or Cursor. Replace the skeleton structure to match your actual dashboard layout.
Customization
Modify the prompt to:
- Add skeleton for cards, lists, or profiles
- Use a shimmer gradient instead of pulse
- Toggle between skeleton and real data for demo
- Add delayed fade-in for content