Lifecycle Chip
Animates through three states — Adding (slide in + spinner) → Active (settle + checkmark) → Removing (fade out + strikethrough). Click Run demo to replay the full add/remove dance.
Lifecycle Chip the 20th of 20 designs in the 20 CSS Tags & Chips Designs collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="ctc-life">
<button type="button" class="ctc-life-run">▶ Run demo</button>
<span class="ctc-life-chip" data-ctc-life data-state="idle">
<span class="ctc-life-icon" aria-hidden="true"></span>
<span class="ctc-life-text">React</span>
</span>
</div> .ctc-life {
display: flex;
align-items: center;
gap: 14px;
}
.ctc-life-run {
padding: 6px 12px;
background: rgba(124, 108, 255, 0.14);
color: #c4b5fd;
border: 1px solid rgba(124, 108, 255, 0.35);
border-radius: 6px;
font:
600 11px/1 ui-monospace,
monospace;
cursor: pointer;
transition:
background 0.15s,
border-color 0.15s,
color 0.15s;
}
.ctc-life-run:hover {
background: rgba(124, 108, 255, 0.26);
color: #fff;
}
.ctc-life-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px 7px 10px;
background: #1f1f2e;
color: #f0eeff;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
font:
600 12px/1 system-ui,
sans-serif;
transition:
opacity 0.4s ease,
transform 0.4s ease,
background 0.3s ease,
border-color 0.3s ease;
}
.ctc-life-icon {
width: 14px;
height: 14px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
flex-shrink: 0;
}
.ctc-life-chip[data-state="adding"] {
background: rgba(124, 108, 255, 0.18);
border-color: rgba(124, 108, 255, 0.4);
color: #c4b5fd;
transform: translateX(-12px);
opacity: 0;
animation: ctc-life-slide-in 0.45s ease forwards;
}
.ctc-life-chip[data-state="adding"] .ctc-life-icon {
border: 2px solid rgba(124, 108, 255, 0.3);
border-top-color: #7c6cff;
background: transparent;
animation: ctc-life-spin 0.7s linear infinite;
}
.ctc-life-chip[data-state="active"] {
background: rgba(46, 204, 138, 0.14);
border-color: rgba(46, 204, 138, 0.4);
color: #2ecc8a;
}
.ctc-life-chip[data-state="active"] .ctc-life-icon {
background: #2ecc8a;
color: #0a0f0c;
font-weight: 900;
}
.ctc-life-chip[data-state="active"] .ctc-life-icon::before {
content: "✓";
}
.ctc-life-chip[data-state="removing"] {
background: rgba(255, 61, 110, 0.1);
border-color: rgba(255, 61, 110, 0.35);
color: rgba(255, 108, 138, 0.7);
text-decoration: line-through;
opacity: 0;
transform: scale(0.85);
}
@media (prefers-reduced-motion: reduce) {
.ctc-slide:hover,
.ctc-aurora,
.ctc-status-dot::after,
.ctc-marquee:hover .ctc-marquee-track,
.ctc-marquee:focus-visible .ctc-marquee-track,
.ctc-life-chip[data-state="adding"],
.ctc-life-chip[data-state="adding"] .ctc-life-icon {
animation: none !important;
}
.ctc-life-chip[data-state="adding"] {
transform: none;
opacity: 1;
}
}
@keyframes ctc-life-slide-in { to { transform: translateX(0); opacity: 1; } }
@keyframes ctc-life-spin { to { transform: rotate(360deg); } }
(function () {
document.querySelectorAll(".ctc-life").forEach(function (root) {
var btn = root.querySelector(".ctc-life-run");
var chip = root.querySelector("[data-ctc-life]");
if (!btn || !chip) return;
var running = false;
btn.addEventListener("click", function () {
if (running) return;
running = true;
chip.setAttribute("data-state", "adding");
setTimeout(function () {
chip.setAttribute("data-state", "active");
}, 1100);
setTimeout(function () {
chip.setAttribute("data-state", "removing");
}, 2400);
setTimeout(function () {
chip.setAttribute("data-state", "idle");
running = false;
}, 3200);
});
});
})();