Checklist Completion
A checklist with animated checkmarks and strike-through text for satisfying task completion. Use in onboarding checklists, to-do lists, or progress trackers where visual completion matters.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
checklistcompletecheckmarkstrike-throughprogress
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A checklist with animated checkmarks and strike-through for satisfying task completion.
CSS
css
.item { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: #a1a1aa; }
.item.done { color: #71717a; }
.item.done .text { text-decoration: line-through; }
.box { width: 22px; height: 22px; border: 2px solid #3f3f46; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.3s ease; }
.item.done .box { background: #22c55e; border-color: #22c55e; }
.box svg { stroke: #fff; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 0.3s 0.1s ease-out; }
.item.done .box svg { stroke-dashoffset: 0; }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }HTML
html
<div class="item" onclick="this.classList.toggle('done')"><div class="box"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M5 12l5 5 9-9"/></svg></div><span class="text">Complete onboarding</span></div>Full Source
html
<!DOCTYPE html>
<html><head><style>
.item { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: #a1a1aa; }
.item.done { color: #71717a; }
.item.done .text { text-decoration: line-through; }
.box { width: 22px; height: 22px; border: 2px solid #3f3f46; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.3s ease; }
.item.done .box { background: #22c55e; border-color: #22c55e; }
.box svg { stroke: #fff; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 0.3s 0.1s ease-out; }
.item.done .box svg { stroke-dashoffset: 0; }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
</style></head><body>
<div class="item" onclick="this.classList.toggle('done')"><div class="box"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M5 12l5 5 9-9"/></svg></div><span class="text">Complete onboarding</span></div>
</body></html>