Success feedback for forms and completed actions
A checkmark tells someone their action worked. Use these success animations after a form is saved, a file finishes uploading or a task is complete.
Wait for your app to confirm the result before playing it. Play the feedback once, then leave a clear status such as Saved beside it.
Check the file size on each detail page and measure your export after editing. Load previews only when needed, respect reduced motion and keep status messages in real text.
We read the colours and fonts from your home page. They stay in this browser.
-
2 s, plays once
-
1.5 s, loops
-
2.5 s, loops
-
3.5 s, loops
-
3 s, loops
-
3 s, plays once
-
Loading preview...
outline · draw-on
-
Loading preview...
flat · pop
-
Loading preview...
duotone · pop
-
Loading preview...
outline · pop
-
Loading preview...
outline · draw-on
-
Loading preview...
flat · pop
Questions
When should a success checkmark play?
Play it after the action has succeeded. Keep a text confirmation visible so the result is clear when the motion ends.
How do I choose a file size and support reduced motion?
Check the file details before downloading and measure the exported file after editing. Compare Lottie JSON and dotLottie in a player that supports them. Load the animation near the screen and show a still frame when someone asks for reduced motion. Keep any status or instructions in real text.