Reading Files Pills
Reading 4 files with a pill per file: a tinted sweep fills each pill in turn under an accent outline, read files go solid, and the header flips to Read 4 files with a drawn check.
Also known as: ai reading files animation, cursor reading files, file context loading, ai agent reading files.
Reading 4 filesRead 4 files
- auth.ts
- session.ts
- middleware.ts
- README.md
HTML
<div class="aia-reading-files" role="status" aria-label="Reading 4 files">
<div class="aia-reading-files-head">
<span class="aia-reading-files-state" aria-hidden="true">
<i class="aia-reading-files-spin"></i>
<svg class="aia-reading-files-tick" viewBox="0 0 24 24"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg>
</span>
<span class="aia-reading-files-labels"><span>Reading 4 files</span><span>Read 4 files</span></span>
</div>
<ul class="aia-reading-files-list">
<li style="--i: 0"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 3h7l4 4v14H7z"/><path d="M14 3v4h4"/></svg>auth.ts</li>
<li style="--i: 1"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 3h7l4 4v14H7z"/><path d="M14 3v4h4"/></svg>session.ts</li>
<li style="--i: 2"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 3h7l4 4v14H7z"/><path d="M14 3v4h4"/></svg>middleware.ts</li>
<li style="--i: 3"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 3h7l4 4v14H7z"/><path d="M14 3v4h4"/></svg>README.md</li>
</ul>
</div>CSS
@property --aia-reading-files-t {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
.aia-reading-files {
--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;
--t: var(--aia-reading-files-t);
--all: clamp(0, calc((var(--t) - 3.9) * 10), 1);
width: 22em;
max-width: 100%;
animation: aia-reading-files-run 8s linear infinite;
}
.aia-reading-files-head {
display: flex;
align-items: center;
gap: 0.55em;
font-weight: 500;
}
.aia-reading-files-state {
display: grid;
width: 1.1em;
height: 1.1em;
}
.aia-reading-files-spin,
.aia-reading-files-tick {
grid-area: 1 / 1;
width: 100%;
height: 100%;
}
.aia-reading-files-spin {
border-radius: 50%;
background: conic-gradient(from 0deg, transparent 20%, var(--c));
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.16em), #000 calc(100% - 0.15em));
mask: radial-gradient(farthest-side, transparent calc(100% - 0.16em), #000 calc(100% - 0.15em));
opacity: calc(1 - var(--all));
animation: aia-reading-files-spin 0.9s linear infinite;
}
.aia-reading-files-tick {
fill: none;
stroke: var(--c);
stroke-width: 2.6;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 22;
stroke-dashoffset: calc((1 - var(--all)) * 22);
}
.aia-reading-files-labels {
display: grid;
}
.aia-reading-files-labels span {
grid-area: 1 / 1;
}
.aia-reading-files-labels span:first-child {
opacity: calc(1 - var(--all));
}
.aia-reading-files-labels span:last-child {
opacity: var(--all);
}
.aia-reading-files-list {
display: flex;
flex-wrap: wrap;
gap: 0.4em;
margin: 0.7em 0 0;
padding: 0;
list-style: none;
}
.aia-reading-files-list li {
/* p: read progress; a: 1 while being read; d: 1 once read */
--p: clamp(0, calc(var(--t) - var(--i)), 1);
--a: calc(clamp(0, calc((var(--t) - var(--i)) * 12), 1) * clamp(0, calc((var(--i) + 1 - var(--t)) * 12), 1));
position: relative;
display: inline-flex;
align-items: center;
gap: 0.35em;
overflow: hidden;
padding: 0.3em 0.65em 0.3em 0.5em;
border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
border-radius: 0.5em;
background: color-mix(in srgb, currentColor 3%, transparent);
font: 0.82em / 1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.aia-reading-files-list li::before,
.aia-reading-files-list li::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
}
.aia-reading-files-list li::before {
background: linear-gradient(90deg, color-mix(in srgb, var(--c) 6%, transparent), color-mix(in srgb, var(--c) 22%, transparent));
transform-origin: left;
transform: scaleX(var(--p));
opacity: var(--a);
}
.aia-reading-files-list li::after {
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 70%, transparent);
opacity: var(--a);
}
.aia-reading-files-list svg {
position: relative;
width: 1.15em;
height: 1.15em;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linejoin: round;
opacity: 0.6;
}
.aia-reading-files-list li {
color: color-mix(in srgb, currentColor calc(45% + var(--p) * 55%), transparent);
}
@keyframes aia-reading-files-run {
0% { --aia-reading-files-t: 0; opacity: 0; }
6% { --aia-reading-files-t: 0; opacity: 1; }
66% { --aia-reading-files-t: 4; }
90% { opacity: 1; }
97%, 100% { --aia-reading-files-t: 4; opacity: 0; }
}
@keyframes aia-reading-files-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.aia-reading-files { animation: none; --aia-reading-files-t: 4; }
.aia-reading-files-spin { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
.aia-reading-files, .aia-reading-files *, .aia-reading-files::before, .aia-reading-files::after, .aia-reading-files *::before, .aia-reading-files *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--aia-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--aia-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. 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.