Animation · Feedback · 08

Check Success

Check Success = a tick that draws itself when an action completes, turning 'done' into a small moment of confirmation.

Respects prefers-reduced-motion: the animation is disabled and the final state is shown.

How to prompt it

Draw a success check on completion: animate stroke-dashoffset from full to 0 over 1.8s ease-out, plays once.

Wrap the tick in a circle that scales in (0.8 to 1) just before the draw for a softer reveal.

Trigger the draw only after the real success state, expose --check-color and --check-speed, and under prefers-reduced-motion render the completed tick with no animation. Pair with a 'Done' label so it is not motion-only.

Modify prompts change only the target — the rest of your page stays untouched.

What is a Check Success?

A success check that draws itself feels earned, not dropped in. The stroke sweeps along the path so the user watches the task finish. Drive it with stroke-dashoffset and fire it once on success — looping a check looks like it is still loading.

Animation Specimen

Trigger: click
Tech: css
Duration: 1.8s
Easing: ease-in-out
Performance: stroke-dashoffset

When to use

Form submitted, payment done, file saved
Any 'completed' confirmation

Avoid when

Looping on a static success screen — it reads as still loading
Without a text label — motion is not the status

One draw per success. Looping a check makes users think the action has not finished.

Get the code

.anim-el {
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
:root { --anim-accent: #6d5efc; }

.check { width: 72px; height: 72px; }
.check circle { fill: none; stroke: var(--anim-accent); stroke-width: 3; opacity: 0.25; }
.check path {
  fill: none;
  stroke: var(--anim-accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 60;
  animation-name: draw;
  animation-duration: var(--anim-duration, 1.8s);
  animation-timing-function: var(--anim-easing, ease-in-out);
}
@keyframes draw {
  0% { stroke-dashoffset: 60; }
  70%, 100% { stroke-dashoffset: 0; }
}

<svg class="check anim-el" viewBox="0 0 52 52" aria-hidden="true">
  <circle cx="26" cy="26" r="24" />
  <path d="M14 27l8 8 16-18" />
</svg>

Copy and drop it into your project. The motion touches only transform / opacity; colour comes from --anim-accent.

Check Success

What is a Check Success?

Animation Specimen

When to use

Avoid when

See also

Components

Animations

Styles

Themes

Prompts

Glossary

Anti-patterns