AI CSS Animations

MCP Servers Connecting

A list of MCP servers coming online: github, linear and figma spin, then turn green with their tool counts, while postgres is refused, hits Retry and connects on the second try. One @property clock.

Also known as: mcp server status ui, model context protocol connecting, integration connection status.

MCP servers
  • githubconnecting26 tools
  • linearconnecting21 tools
  • postgresconnectingrefused :54324 tools
  • figmaconnecting9 tools

HTML

<div class="aia-mcp-servers-connecting" role="status" aria-label="Connecting to MCP servers">
  <div class="aia-mcp-servers-connecting-head">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 3v4.5M15 3v4.5M6.5 7.5h11V11a5.5 5.5 0 0 1-11 0zM12 16.5V21"/></svg>
    <span>MCP servers</span>
    <span class="aia-mcp-servers-connecting-count" aria-hidden="true"></span>
  </div>
  <ul class="aia-mcp-servers-connecting-list">
    <li><span class="aia-mcp-servers-connecting-mark" aria-hidden="true">gh</span><code>github</code><span class="aia-mcp-servers-connecting-state"><span class="aia-mcp-servers-connecting-wait">connecting</span><span class="aia-mcp-servers-connecting-ok">26 tools</span></span></li>
    <li><span class="aia-mcp-servers-connecting-mark" aria-hidden="true">li</span><code>linear</code><span class="aia-mcp-servers-connecting-state"><span class="aia-mcp-servers-connecting-wait">connecting</span><span class="aia-mcp-servers-connecting-ok">21 tools</span></span></li>
    <li><span class="aia-mcp-servers-connecting-mark" aria-hidden="true">pg</span><code>postgres</code><span class="aia-mcp-servers-connecting-state"><span class="aia-mcp-servers-connecting-wait">connecting</span><span class="aia-mcp-servers-connecting-fail">refused :5432<button type="button" tabindex="-1" aria-hidden="true">Retry</button></span><span class="aia-mcp-servers-connecting-ok">4 tools</span></span></li>
    <li><span class="aia-mcp-servers-connecting-mark" aria-hidden="true">fg</span><code>figma</code><span class="aia-mcp-servers-connecting-state"><span class="aia-mcp-servers-connecting-wait">connecting</span><span class="aia-mcp-servers-connecting-ok">9 tools</span></span></li>
  </ul>
</div>

CSS

@property --aia-mcp-servers-connecting-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --aia-mcp-servers-connecting-n {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.aia-mcp-servers-connecting {
  --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: 8s;
  --t: var(--aia-mcp-servers-connecting-t);
  --ok: color-mix(in srgb, #16a34a 78%, currentColor);
  --bad: color-mix(in srgb, #dc2626 80%, currentColor);
  width: 20em;
  padding: 0.8em 0.85em 0.6em;
  animation: aia-mcp-servers-connecting-clock var(--d) linear infinite;
}
.aia-mcp-servers-connecting-head {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin: 0 0.15em 0.4em;
  font-size: 0.82em;
  font-weight: 600;
}
.aia-mcp-servers-connecting-head svg {
  width: 1.15em;
  height: 1.15em;
  color: var(--c);
}
.aia-mcp-servers-connecting-count {
  margin-left: auto;
  color: color-mix(in srgb, currentColor 55%, transparent);
  font: 500 0.92em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --aia-mcp-servers-connecting-n: calc(clamp(0, (var(--t) - 1) * 6, 1) + clamp(0, (var(--t) - 1.5) * 6, 1) + clamp(0, (var(--t) - 2.4) * 6, 1) + clamp(0, (var(--t) - 3.9) * 6, 1));
  counter-reset: n var(--aia-mcp-servers-connecting-n);
  animation: aia-mcp-servers-connecting-fade var(--d) linear infinite;
}
.aia-mcp-servers-connecting-count::before { content: counter(n) "/4 connected"; }
.aia-mcp-servers-connecting-list {
  margin: 0;
  padding: 0;
  list-style: none;
  animation: aia-mcp-servers-connecting-fade var(--d) linear infinite;
}
.aia-mcp-servers-connecting-list li {
  --at: 1;
  --f: 0;
  --k: clamp(0, (var(--t) - var(--at)) * 6, 1);
  --s: clamp(0, 1 - var(--k) - var(--f), 1);
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6em;
  height: 2.15em;
  padding: 0 0.45em;
  border-radius: 0.5em;
}
.aia-mcp-servers-connecting-list li + li { box-shadow: 0 -1px 0 color-mix(in srgb, currentColor 7%, transparent); }
.aia-mcp-servers-connecting-list li:nth-child(2) { --at: 1.5; }
.aia-mcp-servers-connecting-list li:nth-child(3) {
  --at: 3.9;
  --f: calc(clamp(0, (var(--t) - 1.9) * 6, 1) - clamp(0, (var(--t) - 3.1) * 6, 1));
  --press: clamp(0, min((var(--t) - 2.8) * 10, (3.1 - var(--t)) * 10), 1);
}
.aia-mcp-servers-connecting-list li:nth-child(4) { --at: 2.4; }
.aia-mcp-servers-connecting-list li::before {
  content: "";
  position: absolute;
  inset: 0.15em 0;
  border-radius: 0.5em;
  background: color-mix(in srgb, #dc2626 10%, transparent);
  box-shadow: inset 0.16em 0 0 var(--bad);
  opacity: var(--f);
}
.aia-mcp-servers-connecting-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.55em;
  height: 1.55em;
  border-radius: 0.4em;
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: color-mix(in srgb, currentColor 70%, transparent);
  font: 700 0.72em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
/* status dot on the corner of each monogram */
.aia-mcp-servers-connecting-mark::after {
  content: "";
  position: absolute;
  right: -0.2em;
  bottom: -0.2em;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ok) calc(var(--k) * 100%), color-mix(in srgb, var(--bad) calc(var(--f) * 100%), color-mix(in srgb, currentColor 30%, transparent)));
  box-shadow: 0 0 0 0.16em color-mix(in srgb, currentColor 0%, transparent);
}
.aia-mcp-servers-connecting-list code {
  position: relative;
  margin-right: auto;
  font: 500 0.82em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-mcp-servers-connecting-state {
  position: relative;
  display: grid;
  justify-items: end;
  font-size: 0.76em;
}
.aia-mcp-servers-connecting-state > * {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  white-space: nowrap;
}
.aia-mcp-servers-connecting-wait {
  color: color-mix(in srgb, currentColor 50%, transparent);
  opacity: var(--s);
}
.aia-mcp-servers-connecting-wait::before {
  content: "";
  width: 0.85em;
  height: 0.85em;
  box-sizing: border-box;
  border-radius: 50%;
  border: 0.13em solid color-mix(in srgb, var(--c) 22%, transparent);
  border-top-color: var(--c);
  animation: aia-mcp-servers-connecting-spin 0.75s linear infinite;
}
.aia-mcp-servers-connecting-ok {
  color: var(--ok);
  font-weight: 600;
  opacity: var(--k);
  transform: translateX(calc((1 - var(--k)) * 0.5em));
}
.aia-mcp-servers-connecting-fail {
  color: var(--bad);
  font-weight: 600;
  opacity: var(--f);
  visibility: hidden;
}
.aia-mcp-servers-connecting-list li:nth-child(3) .aia-mcp-servers-connecting-fail { visibility: visible; }
.aia-mcp-servers-connecting-fail button {
  padding: 0.25em 0.6em;
  border: 0;
  border-radius: 0.4em;
  background: color-mix(in srgb, var(--c) calc(var(--press) * 100%), color-mix(in srgb, currentColor 9%, transparent));
  color: color-mix(in srgb, #fff calc(var(--press) * 100%), currentColor);
  font: 600 1em system-ui, sans-serif;
  transform: scale(calc(1 - var(--press) * 0.1));
  pointer-events: none;
}
@keyframes aia-mcp-servers-connecting-clock {
  0%, 6% { --aia-mcp-servers-connecting-t: 0; }
  70%, 97% { --aia-mcp-servers-connecting-t: 4.3; }
  97.5%, 100% { --aia-mcp-servers-connecting-t: 0; }
}
@keyframes aia-mcp-servers-connecting-fade {
  0%, 92% { opacity: 1; }
  95.5%, 97.5% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes aia-mcp-servers-connecting-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .aia-mcp-servers-connecting,
  .aia-mcp-servers-connecting-count,
  .aia-mcp-servers-connecting-list {
    animation: none;
    --aia-mcp-servers-connecting-t: 2.5;
  }
  .aia-mcp-servers-connecting-wait::before { animation-duration: 2.4s; }
}

@media (prefers-reduced-motion: reduce) {
  .aia-mcp-servers-connecting, .aia-mcp-servers-connecting *, .aia-mcp-servers-connecting::before, .aia-mcp-servers-connecting::after, .aia-mcp-servers-connecting *::before, .aia-mcp-servers-connecting *::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

Agent Tool Call Card
Agent Terminal Output
Agent File Edit Diff
Agent Plan Checklist