AI CSS Animations

Connection Lost and Reconnect

A reply streams in until the connection drops: the chip turns red and Offline, the caret greys out, Reconnecting dots bounce, then Back online flashes green and the stream picks up mid sentence.

Also known as: offline reconnecting animation, stream interrupted network, websocket reconnect ui.

Claude

Wrap the login handler in the limiter

so each IP gets 5 tries per minute,

then answer with a 429 and Retry-After.

HTML

<div class="aia-connection-lost-reconnect" role="status" aria-label="Connection lost, reconnecting and resuming the reply">
  <span class="aia-connection-lost-reconnect-edge" aria-hidden="true"></span>
  <div class="aia-connection-lost-reconnect-head">
    <span class="aia-connection-lost-reconnect-avatar" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3.5l1.9 5.1 5.1 1.9-5.1 1.9L12 17.5l-1.9-5.1L5 10.5l5.1-1.9z"/></svg></span>
    <b>Claude</b>
    <span class="aia-connection-lost-reconnect-chip" aria-hidden="true">
      <span class="aia-connection-lost-reconnect-live"><i></i>Live</span>
      <span class="aia-connection-lost-reconnect-off"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3l18 18M8.6 16.3a5 5 0 0 1 6.2-.4M5.2 12.8a10 10 0 0 1 3.9-2.4M14.6 10.3a10 10 0 0 1 4.2 2.5M2 9.3a15 15 0 0 1 4-2.6M10.8 5.5A15 15 0 0 1 22 9.3M12 19.5h.01"/></svg>Offline</span>
      <span class="aia-connection-lost-reconnect-try">Reconnecting<i></i><i></i><i></i></span>
      <span class="aia-connection-lost-reconnect-back"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5.5 12.5 4 4 9-9.5"/></svg>Back online</span>
    </span>
  </div>
  <div class="aia-connection-lost-reconnect-reply">
    <p><span>Wrap the login handler in the limiter</span><i aria-hidden="true"></i></p>
    <p><span>so each IP gets 5 tries per minute,</span><i aria-hidden="true"></i></p>
    <p><span>then answer with a 429 and Retry-After.</span><i aria-hidden="true"></i></p>
  </div>
</div>

CSS

@property --aia-connection-lost-reconnect-s {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --aia-connection-lost-reconnect-o {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.aia-connection-lost-reconnect {
  --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;
  position: relative;
  box-sizing: border-box;
  padding: 0.9em 1em;
  border-radius: 0.9em;
  background: color-mix(in srgb, currentColor 3%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 11%, transparent), 0 0.1em 0.2em color-mix(in srgb, currentColor 4%, transparent), 0 0.9em 2em -1.1em rgb(0 0 0 / 0.3);
  --d: 9s;
  --s: var(--aia-connection-lost-reconnect-s);
  --o: var(--aia-connection-lost-reconnect-o);
  --off: clamp(0, min(var(--o) - 0.5, 2.5 - var(--o)) * 3, 1);
  width: 21em;
  padding: 0.85em 1em 0.9em;
  overflow: hidden;
  animation: aia-connection-lost-reconnect-clock var(--d) cubic-bezier(0.4, 0, 0.3, 1) infinite;
}
.aia-connection-lost-reconnect-head,
.aia-connection-lost-reconnect-reply {
  animation: aia-connection-lost-reconnect-fade var(--d) linear infinite;
}
.aia-connection-lost-reconnect-edge {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0.16em;
  overflow: hidden;
  background: color-mix(in srgb, #dc2626 calc(clamp(0, 1 - max(var(--o) - 1, 1 - var(--o)) * 2, 1) * 100%), color-mix(in srgb, #16a34a calc(clamp(0, 1 - max(var(--o) - 3, 3 - var(--o)) * 2, 1) * 100%), transparent));
}
.aia-connection-lost-reconnect-edge::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 35%;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  opacity: clamp(0, 1 - max(var(--o) - 2, 2 - var(--o)) * 2, 1);
  animation: aia-connection-lost-reconnect-sweep 1.1s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.aia-connection-lost-reconnect-head {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.85em;
}
.aia-connection-lost-reconnect-avatar {
  display: grid;
  place-items: center;
  width: 1.75em;
  height: 1.75em;
  border-radius: 0.55em;
  background: var(--c);
  color: #fff;
}
.aia-connection-lost-reconnect-avatar svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  stroke: none;
}
.aia-connection-lost-reconnect-head b { margin-right: auto; }
.aia-connection-lost-reconnect-chip {
  display: grid;
  justify-items: end;
  font-size: 0.82em;
  font-weight: 600;
}
.aia-connection-lost-reconnect-chip > * {
  --k: 0;
  --v: clamp(0, 1 - max(var(--o) - var(--k), var(--k) - var(--o)) * 3, 1);
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  height: 1.8em;
  padding: 0 0.65em;
  border-radius: 999em;
  white-space: nowrap;
  opacity: var(--v);
  transform: scale(calc(0.88 + var(--v) * 0.12));
}
.aia-connection-lost-reconnect-chip svg {
  width: 1.15em;
  height: 1.15em;
  stroke-width: 2.4;
}
.aia-connection-lost-reconnect-live {
  --v: calc(clamp(0, 1 - var(--o) * 3, 1) + clamp(0, (var(--o) - 3.67) * 3, 1));
  background: color-mix(in srgb, currentColor 6%, transparent);
  color: color-mix(in srgb, currentColor 60%, transparent);
}
.aia-connection-lost-reconnect-live i {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #22c55e;
  animation: aia-connection-lost-reconnect-pulse 1.6s ease-in-out infinite;
}
.aia-connection-lost-reconnect-chip .aia-connection-lost-reconnect-off {
  --k: 1;
  background: color-mix(in srgb, #dc2626 12%, transparent);
  color: color-mix(in srgb, #dc2626 80%, currentColor);
}
.aia-connection-lost-reconnect-chip .aia-connection-lost-reconnect-try {
  --k: 2;
  gap: 0.2em;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: color-mix(in srgb, var(--c) 80%, currentColor);
}
.aia-connection-lost-reconnect-try i {
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background: currentColor;
  animation: aia-connection-lost-reconnect-dot 1s ease-in-out infinite;
}
.aia-connection-lost-reconnect-try i:first-of-type { margin-left: 0.25em; }
.aia-connection-lost-reconnect-try i:nth-of-type(2) { animation-delay: 0.12s; }
.aia-connection-lost-reconnect-try i:nth-of-type(3) { animation-delay: 0.24s; }
.aia-connection-lost-reconnect-chip .aia-connection-lost-reconnect-back {
  --k: 3;
  background: color-mix(in srgb, #16a34a 13%, transparent);
  color: color-mix(in srgb, #16a34a 78%, currentColor);
}
.aia-connection-lost-reconnect-reply {
  margin-top: 0.65em;
  font-size: 0.86em;
  line-height: 1.55;
  opacity: calc(1 - var(--off) * 0.4);
}
.aia-connection-lost-reconnect-reply p {
  --i: 0;
  display: flex;
  align-items: center;
  height: 1.55em;
  margin: 0;
}
.aia-connection-lost-reconnect-reply p:nth-child(2) { --i: 1; }
.aia-connection-lost-reconnect-reply p:nth-child(3) { --i: 2; }
.aia-connection-lost-reconnect-reply span {
  display: inline-block;
  overflow: hidden;
  max-width: calc(clamp(0, var(--s) - var(--i), 1) * 22em);
  white-space: nowrap;
}
.aia-connection-lost-reconnect-reply i {
  flex: none;
  width: 0.45em;
  height: 1.05em;
  margin-left: 0.12em;
  border-radius: 0.1em;
  background: color-mix(in srgb, var(--c) calc((1 - var(--off)) * 100%), color-mix(in srgb, currentColor 30%, transparent));
  opacity: calc(clamp(0, (var(--s) - var(--i)) * 200, 1) * clamp(0, (var(--i) + 1 - var(--s)) * 200, 1));
}
@keyframes aia-connection-lost-reconnect-clock {
  0% { --aia-connection-lost-reconnect-s: 0.05; }
  24%, 64% { --aia-connection-lost-reconnect-s: 0.995; }
  66% { --aia-connection-lost-reconnect-s: 1.005; }
  90%, 95.5% { --aia-connection-lost-reconnect-s: 2.995; }
  96.5%, 100% { --aia-connection-lost-reconnect-s: 0.05; }
  0%, 24% { --aia-connection-lost-reconnect-o: 0; }
  27%, 36% { --aia-connection-lost-reconnect-o: 1; }
  39%, 58% { --aia-connection-lost-reconnect-o: 2; }
  61%, 70% { --aia-connection-lost-reconnect-o: 3; }
  74%, 95.5% { --aia-connection-lost-reconnect-o: 4; }
  96.5% { --aia-connection-lost-reconnect-o: 0; }
}
@keyframes aia-connection-lost-reconnect-fade {
  0%, 93% { opacity: 1; }
  95.5%, 97% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes aia-connection-lost-reconnect-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(300%); }
}
@keyframes aia-connection-lost-reconnect-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(34 197 94 / 0.5); }
  60% { box-shadow: 0 0 0 0.3em rgb(34 197 94 / 0); }
}
@keyframes aia-connection-lost-reconnect-dot {
  0%, 60%, 100% { opacity: 0.35; transform: none; }
  30% { opacity: 1; transform: translateY(-0.22em); }
}
@media (prefers-reduced-motion: reduce) {
  .aia-connection-lost-reconnect,
  .aia-connection-lost-reconnect *,
  .aia-connection-lost-reconnect *::before {
    animation: none;
  }
  .aia-connection-lost-reconnect {
    --aia-connection-lost-reconnect-s: 0.995;
    --aia-connection-lost-reconnect-o: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aia-connection-lost-reconnect, .aia-connection-lost-reconnect *, .aia-connection-lost-reconnect::before, .aia-connection-lost-reconnect::after, .aia-connection-lost-reconnect *::before, .aia-connection-lost-reconnect *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

  • Color: set --aia-color on the element or a parent. Currently previewing #3b82f6.
  • Base size: set --aia-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
  • Speed: change the duration on the transition or animation shorthand. 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.

Similar ai animations

Streaming Reply With Soft Caret
Gradient Edge Streaming Text
Streaming Code Block
Inline Citation Pills