←Back to Patterns
UI Patterns Learning App
📊 Completeness Meter Pattern
Show users their progress towards completing a task or profile with visual feedback and encouragement.
🎯 Interactive Example
Fill out the profile form below and watch the completeness meter update in real-time.
Profile Completeness
🚀0%
0%Getting started100%
You're 100% away from a complete profile. Keep going!
Edit Profile
Social Links
💻 Code Example
JSX
Loading source code...
✨ Key Features
✓
Real-time Updates
Progress updates instantly as fields are filled
✓
Visual Feedback
Color-coded progress bar with status messages
✓
Motivational Messages
Encouraging text based on completion level
✓
Flexible Calculation
Customizable field weighting and scoring
🎯 Common Use Cases
👤
Profile Setup
User profile completion tracking
📋
Form Progress
Long form completion status
🎯
Goal Tracking
Progress towards objectives