Progressive Checklist Fill
As a user completes onboarding tasks, list items animate a strikethrough, a checkmark draws itself, and the entire item fades into a completed state, often filling a master progress bar.
Live Demo
What It Is
As a user completes onboarding tasks, list items animate a strikethrough, a checkmark draws itself, and the entire item fades into a completed state, often filling a master progress bar.
✓When to Use
- Getting Started guides
- Setup wizards
- Complex multi-stage profile completions
✕When NOT to Use
- Simple stateless to-do lists
Configuration Tips
- 01Animate the expansion of the next uncompleted task automatically when the current one is checked off
You've Seen It In
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Animate a setup checklist where checking an item crosses the text out and partially fills a progress bar above.
Code Example (Tailwind CSS)
export function ProgressiveChecklistFillDemo() {}Related Effects
Progress Bar
A horizontal bar that fills from left to right, showing the percentage of a task that's complete. Gives users a sense of how much longer they need to wait.
Checkmark Draw Animation
An SVG checkmark that progressively draws itself from left to right inside a circle, confirming a successful action.