Success Check
A copy-paste toasts & alerts component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Toasts & AlertsHTMLCSSany framework
All done!
Copy into your project
HTML
<div class="nuda-success-check" role="status" aria-label="Success">
<svg class="nuda-success-check__svg" viewBox="0 0 52 52" width="48" height="48">
<circle class="nuda-success-check__circle" cx="26" cy="26" r="24"
fill="none" stroke="currentColor" stroke-width="2" />
<path class="nuda-success-check__path" fill="none" stroke="currentColor"
stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
d="M15 27l7 7 15-15" />
</svg>
<p class="nuda-success-check__text">All done!</p>
</div>CSS
/* Success Check
Success notification with SVG checkmark draw animation.
Customize: --success-color */
.nuda-success-check {
--success-color: #e4ff54;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
color: var(--success-color);
}
.nuda-success-check__svg {
color: var(--success-color);
}
.nuda-success-check__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
animation: nuda-success-circle 0.6s ease forwards;
}
.nuda-success-check__path {
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: nuda-success-tick 0.3s ease forwards 0.6s;
}
.nuda-success-check__text {
color: #ccc;
font-size: 0.85rem;
margin: 0;
}
@keyframes nuda-success-circle {
to { stroke-dashoffset: 0; }
}
@keyframes nuda-success-tick {
to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
.nuda-success-check__circle,
.nuda-success-check__path {
animation: none;
stroke-dashoffset: 0;
}
}How to use Success Check
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.