AI Agent Steps Loader: Pure CSS Loading Animation

AI Agent Steps Loader

A three-step task list for AI agents: a spinner walks down the rows and each step turns into a check as it finishes. Change the labels to your own tool calls.

Also known as: ai agent progress, multi step loading checklist, task list loading animation.

Searching the web
Reading 12 sources
Writing the answer

Color Size 64px Dark background

HTML

<div class="ldr-ai-agent-steps" role="status" aria-label="Working on it">
  <ul class="ldr-ai-agent-steps-list">
    <li>Searching the web</li>
    <li>Reading 12 sources</li>
    <li>Writing the answer</li>
  </ul>
  <span class="ldr-ai-agent-steps-checks" aria-hidden="true"><i></i><i></i><i></i></span>
  <span class="ldr-ai-agent-steps-cursor" aria-hidden="true"></span>
</div>

CSS

.ldr-ai-agent-steps {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --row: 1.8em;
  position: relative;
  isolation: isolate;
  font: 500 calc(var(--s) / 3) / 1 system-ui, sans-serif;
}
.ldr-ai-agent-steps-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ldr-ai-agent-steps-list li {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--row);
  padding: 0 0.8em 0 var(--row);
  color: color-mix(in srgb, currentColor 78%, transparent);
  white-space: nowrap;
}
.ldr-ai-agent-steps-list li::before {
  content: "";
  position: absolute;
  left: calc(var(--row) / 2 - 0.16em);
  top: calc(50% - 0.16em);
  width: 0.32em;
  height: 0.32em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent);
}
.ldr-ai-agent-steps-checks {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: grid;
  width: var(--row);
  animation: ldr-ai-agent-steps-done 4.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-ai-agent-steps-checks i {
  position: relative;
  height: var(--row);
}
.ldr-ai-agent-steps-checks i::before {
  content: "";
  position: absolute;
  inset: calc(50% - 0.5em);
  border-radius: 50%;
  background: var(--c);
}
.ldr-ai-agent-steps-checks i::after {
  content: "";
  position: absolute;
  left: calc(50% - 0.12em);
  top: calc(50% - 0.3em);
  width: 0.22em;
  height: 0.44em;
  border: solid #fff;
  border-width: 0 0.12em 0.12em 0;
  transform: rotate(45deg);
}
.ldr-ai-agent-steps-cursor {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: -1;
  height: var(--row);
  border-radius: 0.5em;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 10%, transparent);
  animation: ldr-ai-agent-steps-walk 4.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-ai-agent-steps-cursor::before {
  content: "";
  position: absolute;
  left: calc(var(--row) / 2 - 0.5em);
  top: calc(50% - 0.5em);
  width: 1em;
  height: 1em;
  box-sizing: border-box;
  border: 0.14em solid color-mix(in srgb, var(--ldr-color, #3b82f6) 25%, transparent);
  border-top-color: var(--c);
  border-right-color: var(--c);
  border-radius: 50%;
  animation: ldr-ai-agent-steps-spin 0.7s linear infinite;
}
@keyframes ldr-ai-agent-steps-walk {
  0%       { transform: translateY(0); opacity: 0; }
  4%, 24%  { transform: translateY(0); opacity: 1; }
  30%, 54% { transform: translateY(100%); opacity: 1; }
  60%, 84% { transform: translateY(200%); opacity: 1; }
  90%, 100% { transform: translateY(200%); opacity: 0; }
}
@keyframes ldr-ai-agent-steps-done {
  0%, 24%  { clip-path: inset(0 0 100% 0); opacity: 1; }
  30%, 54% { clip-path: inset(0 0 66.667% 0); opacity: 1; }
  60%, 84% { clip-path: inset(0 0 33.333% 0); opacity: 1; }
  90%, 95% { clip-path: inset(0 0 0 0); opacity: 1; }
  100%     { clip-path: inset(0 0 0 0); opacity: 0; }
}
@keyframes ldr-ai-agent-steps-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ldr-ai-agent-steps, .ldr-ai-agent-steps *, .ldr-ai-agent-steps::before, .ldr-ai-agent-steps::after, .ldr-ai-agent-steps *::before, .ldr-ai-agent-steps *::after {
    animation-duration: 3s;
  }
}

Customizing this loader

Color: set --ldr-color on the element or a parent. Currently previewing #3b82f6.
Size: set --ldr-size. Every dimension in the snippet is derived from it. Currently previewing 64px.
Speed: change the duration on the animation shorthand. Delays on the children are relative, so they keep their rhythm.
Accessibility: the root carries role="status" and an aria-label so screen readers announce the wait. The reduced-motion rule at the end slows the animation for users who asked for less motion.

AI Agent Steps Loader

HTML

CSS

Customizing this loader

Similar loaders