11 Success Animation Examples, From a Quiet Checkmark to Full Confetti

1. react-hot-toast's checkmark: Best for small confirmations: saved, copied, sent

Platform: React, MIT (under 5 KB)

Timo Lins' toast library is a masterclass in the small success. Read its source and the success icon is two tiny animations: a green circle that scales up from zero over 0.3 seconds with an overshooting cubic-bezier(0.175, 0.885, 0.32, 1.275), starting 100ms in, then a tick drawn over 0.2 seconds with ease-out, starting at 200ms. The tick is a rotated corner of two borders whose width grows first and height second, so it draws short leg then long leg, like a pen.

The whole thing is done in about half a second and never repeats. That is the right budget for anything the user does many times a day. The library also has a promise API, so a toast can go from loading to success without a new notification popping in.

Watch out for: Toasts disappear on their own, so never put the only confirmation of something important (a payment, a deletion) in a toast. Keep a persistent confirmation on the page too.

GitHub ↗

2. The SVG line-drawing checkmark (CSS-Tricks): Best for a checkmark that draws itself, with no library

Platform: SVG + CSS (stroke-dashoffset)

Almost every drawn checkmark on the web uses the technique Chris Coyier explained on CSS-Tricks in 2014. Give the SVG path a stroke, set stroke-dasharray to at least the length of the path so the line looks solid, set stroke-dashoffset to the same length so it is hidden, then animate the offset to 0 and keep the end state with animation-fill-mode: forwards.

His article uses JavaScript's getTotalLength() to get the exact length. Today you can skip that: set pathLength="1" on the path and use 1 for both values, so the math is the same for any shape.

Our Checkmark Draw Icon below uses exactly that trick: a ring traces around from the top, then the tick strokes in, with pathLength set to 1 on both shapes.

Watch out for: Round the line caps (stroke-linecap: round) or the start of the stroke shows as a hard square. And draw the circle first, then the tick; the reverse order reads as hesitant.

3. Sonner promise toasts: Best for async actions that go from loading to done

Platform: React (by Emil Kowalski)

Sonner is Emil Kowalski's opinionated toast component for React, and shadcn/ui ships it as its toast component. Beyond `toast.success`, its `toast.promise` takes a promise and moves one toast through loading, success and error states, and `richColors` gives success, error, info and warning toasts their own colors. Toasts stack, and you control how many are visible and whether they expand.

The success pattern to steal is continuity: the same toast that said "Saving" turns into "Saved". Users don't have to match a new message to the action that caused it.

Watch out for: If the action finishes in under about 300ms, skip the loading state entirely and show success directly. A loading toast that flickers for a frame looks like a glitch.

4. Apple Pay's payment sheet: Best for payment success on Apple devices

Platform: Apple Pay (iOS, macOS, watchOS, web)

Apple's own guidance on payment success is mostly about restraint. The Human Interface Guidelines tell you to report transaction results in the payment sheet and to defer to the sheet for progress, because it already presents loading states clearly and extra spinners can confuse people. The system handles the authorization and success feedback; your job comes after.

That job is an order confirmation or thank-you page that thanks the customer, says when the order will ship and how to check its status. The same guidelines say not to animate the Apple Pay mark itself. Success here is clarity, not spectacle.

Watch out for: Don't layer your own celebration over the payment sheet. Put any extra delight (a subtle checkmark, a thank-you line) on your confirmation page, after the system has shown the result.

5. Duolingo's streak milestone phoenix: Best for rare, earned milestones in habit apps

Platform: Native iOS and Android (Duolingo app)

For streak milestones, Duolingo replaced an earlier version where Duo held number balloons with a transformation: Duo turns into a flaming phoenix and rises into flight. Kurt Hartfelder's write-up on the Duolingo blog explains why. The team treated milestones like video game power-ups, dropped ideas like Duo holding flames because "keeping the flame alive" doesn't translate across cultures, and chose the phoenix because it appears in so many cultures and emblems.

The process is the lesson: several rough animation passes to explore variations before refining rhythm and energy, then polish, then a share card so learners can post the milestone. The team reported more learners keeping their streaks after the change. Big celebrations work when they are rare and tied to real effort.

Watch out for: This scale of animation only works because milestones are infrequent. Put a phoenix on every lesson and it becomes a delay people tap through.

6. canvas-confetti: Best for confetti bursts with a reduced-motion switch

Platform: JavaScript, ISC license

The most used confetti library on the web, with about 12,800 GitHub stars. Call `confetti()` and paper shoots up from the bottom of the screen; options set the origin, spread, colors and particle count. Shapes include squares, circles and stars, and you can make your own from an SVG path or any emoji or text.

Two options make it production-grade. `disableForReducedMotion` skips the effect for people who have asked for less motion, and `useWorker` renders on a web worker so the burst doesn't stutter while your app is busy. `confetti.create()` binds it to one canvas if you want the burst inside a card instead of the whole page.

If you only need a small burst on one button, our Confetti Burst Button below is a pure-CSS alternative: ten plain elements, each with its own vector, flying out from behind the button.

Watch out for: `disableForReducedMotion` defaults to false, so turn it on yourself. Full-screen confetti covers the content for a second or two; never fire it over the information the user needs next.

7. js-confetti: Best for emoji celebrations with zero dependencies

Platform: JavaScript, MIT

A smaller alternative with no dependencies. `addConfetti()` fires a burst, `confettiColors` sets the palette and `confettiNumber` the amount, and `emojis` swaps the paper for emoji, which is how you get a shower of unicorns, rainbows or your own brand character.

Emoji confetti is a cheap way to make a celebration feel specific to your product: coffee cups for a café app, books for a reading goal. It is a nice middle ground between a checkmark and a custom animation.

For a calmer version on a thank-you page, our Confetti Background below lets paper flutter down in pure CSS, retinted from one accent color.

Watch out for: It has no built-in reduced-motion option, so check `matchMedia('(prefers-reduced-motion: reduce)')` before calling it.

8. LottieFiles success animations: Best for illustrated success screens without an animator

Platform: Lottie JSON, GIF and MP4 (free and paid packs)

LottieFiles lists well over a thousand free success animations from its community: checkmarks, thumbs up, trophies, party poppers, payment confirmations. As Lottie files they stay sharp at any size and are usually much lighter than video.

They suit full-screen success states in mobile apps, such as "Account created" or "Order placed", where you have room for an illustration and the user is happy to pause for a second.

Watch out for: Pick animations that end on a still frame rather than looping, so the success screen settles. Check each file's credit and license, and remember the Lottie player adds weight.

9. Our Submit, Loading, Success Button: Best for forms where the button itself confirms success

Platform: Motions directory, free, pure CSS Ours

The most common success animation in product UI, done in CSS: click and the pill shrinks into a spinning ring, then grows back green with a check drawn in. The button that started the action is the one that confirms it, so the user's eyes never have to move.

All three states come from one hidden checkbox and chained animation delays. In a real form, swap the checkbox for classes your submit handler sets, and the timing stays the same.

Watch out for: Announce the result in text for screen readers (an aria-live region saying "Saved"), and return the button to its normal state if the user needs to submit again.

10. Our Spinner to Checkmark: Best for save and upload flows with a visible finish

Platform: Motions directory, free, pure CSS Ours

An arc spins, closes into a full circle, pops, and draws a checkmark. It turns a loading indicator into a success indicator in place, which is the smoothest way to end a wait: the thing you were watching becomes the answer.

The demo loops so you can see the whole sequence. To use it for real, split the keyframes so the spin runs while you wait and the close-and-check plays once when the request succeeds. The Loaders directory has more spinners you can end the same way.

Watch out for: Hold the checkmark for at least half a second before moving on or closing the dialog. A check that vanishes instantly is easy to miss.

11. Our Agent Task Complete: Best for finishing a long background job

Platform: Motions directory, free, pure SVG and CSS Ours

When something ran for minutes (an export, a build, an AI agent's task), a slightly bigger success is earned. Here a ring draws itself, fills, a check strokes in with a small burst of sparks, then "Task complete" and a result line slide up beside it.

It sits between a toast and confetti: more presence than a tiny check, but contained in a card, so it doesn't take over the screen. Swap the result line for whatever finished, such as a file name or a link.

Watch out for: For jobs that finish while the user is in another tab, pair it with a notification or a title change; an animation nobody sees isn't a confirmation.