AI CSS Animations

Scheduled Agent Run

A scheduled agent set to every weekday at 9:00 counts its next run down to zero, fires with a ring off its clock, runs, then logs 7 issues triaged and adds a fresh green square to its run history.

Also known as: cron job animation, scheduled task ui, recurring agent countdown.

Daily issue triageEvery weekday at 9:00
Next run in Running now Triaged 7 issues in 42s

HTML

<div class="aia-scheduled-run" role="status" aria-label="Scheduled agent: daily issue triage">
  <div class="aia-scheduled-run-head">
    <span class="aia-scheduled-run-icon" 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"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg></span>
    <span class="aia-scheduled-run-who"><b>Daily issue triage</b><span>Every weekday at 9:00</span></span>
    <span class="aia-scheduled-run-on" aria-hidden="true">On</span>
  </div>
  <ol class="aia-scheduled-run-week" aria-hidden="true">
    <li>M</li><li>T</li><li>W</li><li class="aia-scheduled-run-today">T</li><li>F</li><li>S</li><li>S</li>
  </ol>
  <div class="aia-scheduled-run-state">
    <span class="aia-scheduled-run-next">Next run in <b class="aia-scheduled-run-count" aria-hidden="true"></b></span>
    <span class="aia-scheduled-run-busy">Running now</span>
    <span class="aia-scheduled-run-done"><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>Triaged 7 issues in 42s</span>
  </div>
  <div class="aia-scheduled-run-hist" aria-hidden="true">
    <i></i><i></i><i></i><i class="aia-scheduled-run-miss"></i><i></i><i></i><i></i><i></i><i></i><i class="aia-scheduled-run-new"></i>
  </div>
</div>

CSS

@property --aia-scheduled-run-s {
  syntax: "<integer>";
  inherits: false;
  initial-value: 5;
}
.aia-scheduled-run {
  --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);
  width: 20em;
  padding: 0.85em 0.95em 0.8em;
}
.aia-scheduled-run-head {
  display: flex;
  align-items: center;
  gap: 0.65em;
}
.aia-scheduled-run-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 2.1em;
  height: 2.1em;
  border-radius: 0.65em;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
}
.aia-scheduled-run-icon svg {
  width: 1.2em;
  height: 1.2em;
}
/* the ring that fires off the clock when the run starts */
.aia-scheduled-run-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0.15em var(--c);
  opacity: 0;
  animation: aia-scheduled-run-fire var(--d) cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.aia-scheduled-run-who {
  display: grid;
  margin-right: auto;
  line-height: 1.3;
}
.aia-scheduled-run-who b {
  font-size: 0.9em;
  font-weight: 600;
}
.aia-scheduled-run-who span {
  color: color-mix(in srgb, currentColor 55%, transparent);
  font-size: 0.76em;
}
.aia-scheduled-run-on {
  padding: 0.2em 0.6em;
  border-radius: 999em;
  background: color-mix(in srgb, #16a34a 12%, transparent);
  color: var(--ok);
  font-size: 0.7em;
  font-weight: 700;
}
.aia-scheduled-run-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.3em;
  margin: 0.75em 0 0.65em;
  padding: 0;
  list-style: none;
}
.aia-scheduled-run-week li {
  display: grid;
  place-items: center;
  height: 1.6em;
  border-radius: 0.45em;
  background: color-mix(in srgb, var(--c) 11%, transparent);
  color: color-mix(in srgb, var(--c) 75%, currentColor);
  font-size: 0.68em;
  font-weight: 700;
}
.aia-scheduled-run-week li:nth-child(n + 6) {
  background: color-mix(in srgb, currentColor 5%, transparent);
  color: color-mix(in srgb, currentColor 35%, transparent);
}
.aia-scheduled-run-week .aia-scheduled-run-today {
  background: var(--c);
  color: #fff;
  animation: aia-scheduled-run-today var(--d) ease infinite;
}
.aia-scheduled-run-state {
  display: grid;
  font-size: 0.8em;
}
.aia-scheduled-run-state > * {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  white-space: nowrap;
}
.aia-scheduled-run-next {
  color: color-mix(in srgb, currentColor 60%, transparent);
  animation: aia-scheduled-run-a var(--d) ease infinite;
}
.aia-scheduled-run-count {
  padding: 0.05em 0.4em;
  border-radius: 0.35em;
  background: color-mix(in srgb, currentColor 7%, transparent);
  color: currentColor;
  font: 600 1em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  counter-reset: s var(--aia-scheduled-run-s);
  animation: aia-scheduled-run-tick var(--d) infinite;
}
.aia-scheduled-run-count::before { content: "00:" counter(s, decimal-leading-zero); }
.aia-scheduled-run-busy {
  color: color-mix(in srgb, var(--c) 80%, currentColor);
  font-weight: 600;
  animation: aia-scheduled-run-b var(--d) ease infinite;
}
.aia-scheduled-run-busy::before {
  content: "";
  width: 0.9em;
  height: 0.9em;
  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-scheduled-run-spin 0.75s linear infinite;
}
.aia-scheduled-run-done {
  color: var(--ok);
  font-weight: 600;
  animation: aia-scheduled-run-c var(--d) ease infinite;
}
.aia-scheduled-run-done svg {
  width: 1.05em;
  height: 1.05em;
  stroke-width: 3;
}
.aia-scheduled-run-hist {
  display: flex;
  gap: 0.25em;
  margin-top: 0.6em;
}
.aia-scheduled-run-hist i {
  flex: 1;
  height: 0.55em;
  border-radius: 0.15em;
  background: color-mix(in srgb, #16a34a 55%, transparent);
}
.aia-scheduled-run-hist .aia-scheduled-run-miss { background: color-mix(in srgb, #dc2626 55%, transparent); }
.aia-scheduled-run-hist .aia-scheduled-run-new {
  animation: aia-scheduled-run-new var(--d) cubic-bezier(0.34, 1.5, 0.64, 1) infinite;
}
@keyframes aia-scheduled-run-tick {
  0% { --aia-scheduled-run-s: 5; animation-timing-function: steps(5, end); }
  55.5%, 100% { --aia-scheduled-run-s: 0; }
}
@keyframes aia-scheduled-run-a {
  0%, 55%, 97%, 100% { opacity: 1; transform: none; }
  56.5%, 95% { opacity: 0; transform: translateY(-0.5em); }
}
@keyframes aia-scheduled-run-b {
  0%, 56.5%, 100% { opacity: 0; transform: translateY(0.5em); }
  58%, 76.5% { opacity: 1; transform: none; }
  78% { opacity: 0; transform: translateY(-0.5em); }
}
@keyframes aia-scheduled-run-c {
  0%, 78%, 95%, 100% { opacity: 0; transform: translateY(0.5em); }
  79.5%, 93% { opacity: 1; transform: none; }
}
@keyframes aia-scheduled-run-fire {
  0%, 55% { opacity: 0; transform: scale(1); }
  56% { opacity: 0.8; transform: scale(1); }
  66%, 100% { opacity: 0; transform: scale(1.7); }
}
@keyframes aia-scheduled-run-today {
  0%, 55%, 78%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 0%, transparent); }
  58%, 75% { box-shadow: 0 0 0 0.2em color-mix(in srgb, var(--c) 30%, transparent); }
}
@keyframes aia-scheduled-run-new {
  0%, 77% { background: color-mix(in srgb, currentColor 10%, transparent); transform: scaleY(0.6); }
  81%, 95% { background: color-mix(in srgb, #16a34a 55%, transparent); transform: none; }
  98%, 100% { background: color-mix(in srgb, currentColor 10%, transparent); transform: scaleY(0.6); }
}
@keyframes aia-scheduled-run-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .aia-scheduled-run *,
  .aia-scheduled-run *::before,
  .aia-scheduled-run *::after {
    animation-play-state: paused;
    animation-delay: calc(var(--d) * -0.86);
  }
}

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