PDF Reading Pages
An agent reading a PDF: a scan line sweeps each page, the page turns away on its hinge, and the Reading page 14 of 32 counter and progress bar step along with every flip. Pages are pure gradients.
Also known as: ai reading document animation, pdf processing loader, document scan animation.
PDFq3-board-deck.pdf
Reading page of 32
Pulling tables and figures
HTML
<div class="aia-pdf-reading-pages" role="status" aria-label="Reading a 32 page PDF">
<div class="aia-pdf-reading-pages-stack" aria-hidden="true">
<span class="aia-pdf-reading-pages-page aia-pdf-reading-pages-back"></span>
<span class="aia-pdf-reading-pages-page"></span>
<span class="aia-pdf-reading-pages-page aia-pdf-reading-pages-top"><i></i></span>
</div>
<div class="aia-pdf-reading-pages-info">
<span class="aia-pdf-reading-pages-file"><b>PDF</b>q3-board-deck.pdf</span>
<span class="aia-pdf-reading-pages-read">Reading page <b class="aia-pdf-reading-pages-num"></b> of 32</span>
<span class="aia-pdf-reading-pages-bar" aria-hidden="true"><i></i></span>
<span class="aia-pdf-reading-pages-sub">Pulling tables and figures</span>
</div>
</div>CSS
@property --aia-pdf-reading-pages-p {
syntax: "<number>";
inherits: true;
initial-value: 12;
}
@property --aia-pdf-reading-pages-k {
syntax: "<integer>";
inherits: false;
initial-value: 12;
}
.aia-pdf-reading-pages {
--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: 7.2s;
--flip: calc(var(--d) / 6);
--p: var(--aia-pdf-reading-pages-p);
--ln: rgb(15 15 25 / 0.14);
display: flex;
align-items: center;
gap: 1.1em;
width: 20.5em;
padding: 0.85em 1.1em 0.85em 0.9em;
animation: aia-pdf-reading-pages-clock var(--d) infinite;
}
.aia-pdf-reading-pages-stack {
position: relative;
flex: none;
width: 6.3em;
height: 7.6em;
perspective: 22em;
}
.aia-pdf-reading-pages-page {
position: absolute;
left: 0.3em;
top: 0.25em;
width: 5.4em;
height: 7em;
overflow: hidden;
border-radius: 0.25em;
background:
linear-gradient(var(--c) 0 0) 0.55em 0.6em / 2.4em 0.34em no-repeat,
repeating-linear-gradient(var(--ln) 0 0.14em, transparent 0.14em 0.42em) 0.55em 1.35em / 4.3em 1.6em no-repeat,
linear-gradient(to top, color-mix(in srgb, var(--c) 55%, transparent) 0 60%, transparent 60%) 0.55em 3.3em / 0.7em 1.5em no-repeat,
linear-gradient(to top, color-mix(in srgb, var(--c) 40%, transparent) 0 85%, transparent 85%) 1.45em 3.3em / 0.7em 1.5em no-repeat,
linear-gradient(to top, color-mix(in srgb, var(--c) 55%, transparent) 0 45%, transparent 45%) 2.35em 3.3em / 0.7em 1.5em no-repeat,
linear-gradient(to top, color-mix(in srgb, var(--c) 40%, transparent) 0 100%, transparent 100%) 3.25em 3.3em / 0.7em 1.5em no-repeat,
repeating-linear-gradient(var(--ln) 0 0.14em, transparent 0.14em 0.42em) 0.55em 5.2em / 3.6em 1.25em no-repeat,
#fff;
box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08), 0 0.4em 1em -0.4em rgb(0 0 0 / 0.4);
}
.aia-pdf-reading-pages-page.aia-pdf-reading-pages-back {
left: 0.75em;
top: 0.4em;
background: #ececf0;
transform: rotate(5deg);
}
.aia-pdf-reading-pages-top {
transform-origin: 0 50%;
backface-visibility: hidden;
animation: aia-pdf-reading-pages-turn var(--flip) cubic-bezier(0.5, 0, 0.3, 1) infinite;
}
.aia-pdf-reading-pages-top i {
position: absolute;
left: 0;
right: 0;
top: -1.4em;
height: 1.4em;
background: linear-gradient(transparent, color-mix(in srgb, var(--c) 26%, transparent));
border-bottom: 0.12em solid var(--c);
animation: aia-pdf-reading-pages-scan var(--flip) linear infinite;
}
.aia-pdf-reading-pages-info {
display: grid;
gap: 0.35em;
min-width: 0;
}
.aia-pdf-reading-pages-file {
display: inline-flex;
align-items: center;
gap: 0.45em;
color: color-mix(in srgb, currentColor 60%, transparent);
font: 0.72em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
white-space: nowrap;
}
.aia-pdf-reading-pages-file b {
padding: 0.15em 0.4em;
border-radius: 0.3em;
background: color-mix(in srgb, #dc2626 85%, #000);
color: #fff;
font: 700 0.85em system-ui, sans-serif;
letter-spacing: 0.04em;
}
.aia-pdf-reading-pages-read {
font-size: 0.92em;
font-weight: 600;
white-space: nowrap;
animation: aia-pdf-reading-pages-fade var(--d) linear infinite;
}
.aia-pdf-reading-pages-num {
display: inline-block;
min-width: 1.2em;
color: var(--c);
font-variant-numeric: tabular-nums;
text-align: center;
--aia-pdf-reading-pages-k: calc(var(--p) - 0.49);
counter-reset: k var(--aia-pdf-reading-pages-k);
}
.aia-pdf-reading-pages-num::before { content: counter(k); }
.aia-pdf-reading-pages-bar {
position: relative;
height: 0.3em;
overflow: hidden;
border-radius: 1em;
background: color-mix(in srgb, currentColor 9%, transparent);
}
.aia-pdf-reading-pages-bar i {
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--c);
transform-origin: left;
transform: scaleX(calc(var(--p) / 32));
}
.aia-pdf-reading-pages-sub {
background: linear-gradient(90deg, color-mix(in srgb, currentColor 45%, transparent) 35%, currentColor 50%, color-mix(in srgb, currentColor 45%, transparent) 65%) 0 0 / 300% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 0.74em;
white-space: nowrap;
animation: aia-pdf-reading-pages-shine 1.8s linear infinite;
}
@keyframes aia-pdf-reading-pages-clock {
0%, 13.5% { --aia-pdf-reading-pages-p: 12; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
16.6%, 30.2% { --aia-pdf-reading-pages-p: 13; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
33.3%, 46.9% { --aia-pdf-reading-pages-p: 14; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
50%, 63.5% { --aia-pdf-reading-pages-p: 15; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
66.6%, 80.2% { --aia-pdf-reading-pages-p: 16; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
83.3%, 100% { --aia-pdf-reading-pages-p: 17; }
}
@keyframes aia-pdf-reading-pages-turn {
0%, 58% { transform: none; opacity: 1; }
86% { transform: rotateY(-105deg); opacity: 0; }
87%, 100% { transform: none; opacity: 0; }
}
@keyframes aia-pdf-reading-pages-scan {
0% { transform: translateY(0); opacity: 1; }
55% { transform: translateY(8.4em); opacity: 1; }
56%, 100% { transform: translateY(8.4em); opacity: 0; }
}
@keyframes aia-pdf-reading-pages-fade {
0%, 95% { opacity: 1; }
98% { opacity: 0.2; }
100% { opacity: 1; }
}
@keyframes aia-pdf-reading-pages-shine {
from { background-position: 100% 0; }
to { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
.aia-pdf-reading-pages,
.aia-pdf-reading-pages-read,
.aia-pdf-reading-pages-top,
.aia-pdf-reading-pages-top i {
animation: none;
--aia-pdf-reading-pages-p: 14;
}
.aia-pdf-reading-pages-top i { opacity: 0; }
.aia-pdf-reading-pages-sub { animation-duration: 5s; }
}
@media (prefers-reduced-motion: reduce) {
.aia-pdf-reading-pages, .aia-pdf-reading-pages *, .aia-pdf-reading-pages::before, .aia-pdf-reading-pages::after, .aia-pdf-reading-pages *::before, .aia-pdf-reading-pages *::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.