Stop Generating Pill
The floating pill a chat shows while a reply streams: a stop square breathing inside a pinging halo, the label, an Esc key hint, and a soft accent ring pulsing around the whole button.
Also known as: stop generating button, chatgpt stop button, ai stop button animation, cancel generation button.
HTML
<button class="aia-stop-generating-pill" type="button"> <span class="aia-stop-generating-pill-icon" aria-hidden="true"></span> Stop generating <kbd class="aia-stop-generating-pill-kbd">Esc</kbd> </button>
CSS
.aia-stop-generating-pill {
--c: var(--aia-color, #7c5cff);
font-size: var(--aia-size, 16px);
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
line-height: 1.4;
display: inline-flex;
align-items: center;
gap: 0.6em;
padding: 0.5em 0.6em 0.5em 0.55em;
border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
border-radius: 99em;
background: color-mix(in srgb, currentColor 4%, transparent);
color: inherit;
font-size: calc(var(--aia-size, 16px) * 1.05);
font-weight: 500;
cursor: pointer;
box-shadow: 0 0.4em 1.2em -0.5em rgb(0 0 0 / 0.25);
animation: aia-stop-generating-pill-ring 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
transition: background-color 0.2s;
}
.aia-stop-generating-pill:hover {
background: color-mix(in srgb, currentColor 8%, transparent);
}
.aia-stop-generating-pill:focus-visible {
outline: 2px solid var(--c);
outline-offset: 2px;
}
.aia-stop-generating-pill-icon {
position: relative;
display: grid;
place-items: center;
width: 1.65em;
height: 1.65em;
border-radius: 50%;
background: color-mix(in srgb, var(--c) 16%, transparent);
}
.aia-stop-generating-pill-icon::before {
content: "";
width: 0.58em;
height: 0.58em;
border-radius: 0.14em;
background: var(--c);
animation: aia-stop-generating-pill-breathe 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.aia-stop-generating-pill-icon::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
box-shadow: 0 0 0 1px var(--c);
animation: aia-stop-generating-pill-ping 2.4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.aia-stop-generating-pill-kbd {
margin-left: 0.15em;
padding: 0.15em 0.45em;
border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
border-bottom-width: 2px;
border-radius: 0.4em;
color: color-mix(in srgb, currentColor 60%, transparent);
font: 500 0.72em / 1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@keyframes aia-stop-generating-pill-ring {
0%, 100% { box-shadow: 0 0.4em 1.2em -0.5em rgb(0 0 0 / 0.25), 0 0 0 0 color-mix(in srgb, var(--c) 0%, transparent); }
50% { box-shadow: 0 0.4em 1.2em -0.5em rgb(0 0 0 / 0.25), 0 0 0 0.3em color-mix(in srgb, var(--c) 14%, transparent); }
}
@keyframes aia-stop-generating-pill-breathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(0.78); }
}
@keyframes aia-stop-generating-pill-ping {
0% { transform: scale(1); opacity: 0.7; }
60%, 100% { transform: scale(1.75); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.aia-stop-generating-pill,
.aia-stop-generating-pill-icon::before,
.aia-stop-generating-pill-icon::after { animation: none; }
.aia-stop-generating-pill-icon::after { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.aia-stop-generating-pill, .aia-stop-generating-pill *, .aia-stop-generating-pill::before, .aia-stop-generating-pill::after, .aia-stop-generating-pill *::before, .aia-stop-generating-pill *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--aia-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--aia-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.