AI CSS Animations

Skill Loaded Chip

Loaded skill: pdf. A chip pops in with a spinning ring, unfolds sideways to name the skill, drops open its files, then tucks away again while the agent carries on running the skill's script.

Also known as: agent skill loaded, loaded skill indicator, skill activation ui.

I'll pull the line items out of invoice-q3.pdf.

Loaded skillpdf

Found 41 line items in 3 tables.

HTML

<div class="aia-skill-loaded-chip" role="status" aria-label="Loaded skill: pdf">
  <p class="aia-skill-loaded-chip-say"><span class="aia-skill-loaded-chip-av" 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><span>I'll pull the line items out of <code>invoice-q3.pdf</code>.</span></p>
  <div class="aia-skill-loaded-chip-chip">
    <div class="aia-skill-loaded-chip-row">
      <span class="aia-skill-loaded-chip-ic" 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="M5 4.5A1.5 1.5 0 0 1 6.5 3H19v15H6.5A1.5 1.5 0 0 0 5 19.5z"/><path d="M5 19.5A1.5 1.5 0 0 0 6.5 21H19v-3"/><path d="M9 7.5h6"/></svg></span>
      <span class="aia-skill-loaded-chip-name"><span>Loaded skill</span><b>pdf</b></span>
    </div>
    <div class="aia-skill-loaded-chip-more" aria-hidden="true">
      <p>Read, split, fill and pull tables out of PDF files.</p>
      <p><code>SKILL.md</code><code>scripts/extract_tables.py</code></p>
    </div>
  </div>
  <div class="aia-skill-loaded-chip-tool" aria-hidden="true"><span class="aia-skill-loaded-chip-box"><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></span><b>Bash</b><code>python scripts/extract_tables.py invoice-q3.pdf</code></div>
  <p class="aia-skill-loaded-chip-out">Found 41 line items in 3 tables.</p>
</div>

CSS

.aia-skill-loaded-chip {
  --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;
  --ok: color-mix(in srgb, #16a34a 78%, currentColor);
  display: grid;
  justify-items: start;
  gap: 0.5em;
  width: 23em;
  padding: 0.8em 0.95em;
  animation: aia-skill-loaded-chip-fade var(--d) linear infinite;
}
.aia-skill-loaded-chip-say {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  font-size: 0.88em;
}
.aia-skill-loaded-chip-say code,
.aia-skill-loaded-chip-tool code {
  font: 0.86em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-skill-loaded-chip-av {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 0.45em;
  background: var(--c);
  color: #fff;
}
.aia-skill-loaded-chip-av svg {
  width: 0.95em;
  height: 0.95em;
  fill: currentColor;
  stroke: none;
}
.aia-skill-loaded-chip-chip {
  margin-left: 1.9em;
  overflow: hidden;
  border-radius: 0.75em;
  background: color-mix(in srgb, var(--c) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent);
  transform-origin: 0.9em 50%;
  animation: aia-skill-loaded-chip-pop var(--d) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.aia-skill-loaded-chip-row {
  display: flex;
  align-items: center;
  padding: 0.25em;
}
.aia-skill-loaded-chip-ic {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 0.5em;
  background: var(--c);
  color: #fff;
}
.aia-skill-loaded-chip-ic svg {
  width: 0.95em;
  height: 0.95em;
}
.aia-skill-loaded-chip-ic::after {
  content: "";
  position: absolute;
  inset: -0.22em;
  border-radius: 0.65em;
  border: 0.12em solid transparent;
  border-top-color: var(--c);
  border-right-color: var(--c);
  animation:
    aia-skill-loaded-chip-spin 0.8s linear infinite,
    aia-skill-loaded-chip-ring var(--d) linear infinite;
}
.aia-skill-loaded-chip-name {
  display: flex;
  align-items: center;
  gap: 0.45em;
  overflow: hidden;
  white-space: nowrap;
  animation: aia-skill-loaded-chip-unfold var(--d) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.aia-skill-loaded-chip-name span {
  margin-left: 0.55em;
  color: color-mix(in srgb, currentColor 62%, transparent);
  font-size: 0.8em;
}
.aia-skill-loaded-chip-name b {
  margin-right: 0.45em;
  padding: 0.1em 0.45em;
  border-radius: 0.35em;
  background: color-mix(in srgb, var(--c) 16%, transparent);
  color: color-mix(in srgb, var(--c) 78%, currentColor);
  font: 600 0.8em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-skill-loaded-chip-more {
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 0.7em;
  animation: aia-skill-loaded-chip-more var(--d) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.aia-skill-loaded-chip-more p {
  display: flex;
  gap: 0.35em;
  margin: 0 0 0.35em;
  color: color-mix(in srgb, currentColor 62%, transparent);
  font-size: 0.74em;
  white-space: nowrap;
}
.aia-skill-loaded-chip-more code {
  padding: 0.1em 0.4em;
  border-radius: 0.3em;
  background: color-mix(in srgb, currentColor 7%, transparent);
  color: currentColor;
  font: 0.94em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-skill-loaded-chip-tool {
  display: flex;
  align-items: center;
  gap: 0.45em;
  max-width: calc(100% - 1.9em);
  margin-left: 1.9em;
  overflow: hidden;
  white-space: nowrap;
  animation: aia-skill-loaded-chip-tool var(--d) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.aia-skill-loaded-chip-tool b {
  font-size: 0.8em;
}
.aia-skill-loaded-chip-tool code {
  overflow: hidden;
  color: color-mix(in srgb, currentColor 58%, transparent);
  text-overflow: ellipsis;
  font-size: 0.74em;
}
.aia-skill-loaded-chip-box {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 0.95em;
  height: 0.95em;
}
.aia-skill-loaded-chip-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 0.12em solid color-mix(in srgb, var(--c) 22%, transparent);
  border-top-color: var(--c);
  animation:
    aia-skill-loaded-chip-spin 0.8s linear infinite,
    aia-skill-loaded-chip-busy var(--d) linear infinite;
}
.aia-skill-loaded-chip-box svg {
  width: 0.95em;
  height: 0.95em;
  color: var(--ok);
  stroke-width: 3;
  animation: aia-skill-loaded-chip-done var(--d) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.aia-skill-loaded-chip-out {
  margin: 0 0 0 2.15em;
  overflow: hidden;
  font-size: 0.86em;
  -webkit-mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat;
  mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat;
  animation: aia-skill-loaded-chip-write var(--d) linear infinite;
}
@keyframes aia-skill-loaded-chip-pop {
  0%, 2% { opacity: 0; transform: scale(0.4); }
  7%, 100% { opacity: 1; transform: none; }
}
@keyframes aia-skill-loaded-chip-ring {
  0%, 18% { opacity: 1; }
  21%, 100% { opacity: 0; }
}
@keyframes aia-skill-loaded-chip-unfold {
  0%, 18% { max-width: 0; opacity: 0; }
  26%, 100% { max-width: 9em; opacity: 1; }
}
@keyframes aia-skill-loaded-chip-more {
  0%, 27% { max-height: 0; max-width: 0; padding-top: 0; opacity: 0; }
  35%, 58% { max-height: 4em; max-width: 22em; padding-top: 0.15em; opacity: 1; }
  66%, 100% { max-height: 0; max-width: 0; padding-top: 0; opacity: 0; }
}
@keyframes aia-skill-loaded-chip-tool {
  0%, 38% { max-height: 0; margin-top: -0.5em; opacity: 0; transform: translateY(0.5em); }
  45%, 100% { max-height: 1.6em; margin-top: 0; opacity: 1; transform: none; }
}
@keyframes aia-skill-loaded-chip-busy {
  0%, 70% { opacity: 1; }
  72%, 100% { opacity: 0; }
}
@keyframes aia-skill-loaded-chip-done {
  0%, 70% { opacity: 0; transform: scale(0.4); }
  75%, 100% { opacity: 1; transform: none; }
}
@keyframes aia-skill-loaded-chip-write {
  0%, 68% { -webkit-mask-position: 100% 0; mask-position: 100% 0; max-height: 0; margin-top: -0.5em; }
  73% { -webkit-mask-position: 100% 0; mask-position: 100% 0; max-height: 1.5em; margin-top: 0; }
  86%, 100% { -webkit-mask-position: 0 0; mask-position: 0 0; max-height: 1.5em; margin-top: 0; }
}
@keyframes aia-skill-loaded-chip-spin {
  to { transform: rotate(360deg); }
}
@keyframes aia-skill-loaded-chip-fade {
  0%, 93% { opacity: 1; }
  97%, 99% { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .aia-skill-loaded-chip,
  .aia-skill-loaded-chip-chip,
  .aia-skill-loaded-chip-ic::after,
  .aia-skill-loaded-chip-name,
  .aia-skill-loaded-chip-more,
  .aia-skill-loaded-chip-tool,
  .aia-skill-loaded-chip-box::before,
  .aia-skill-loaded-chip-box svg,
  .aia-skill-loaded-chip-out {
    animation-play-state: paused;
    animation-delay: calc(var(--d) * -0.88);
  }
}

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