Web Search Source Chips
A Searching the web row with an orbiting magnifier, then source chips with little favicons pop in one by one on a spring and a 14 sources count fades in beside the label.
Also known as: searching the web animation, perplexity sources animation, ai search loading, source chips ui.
Searching the web
14 sources
- Wwikipedia.org
- Vtheverge.com
- aarxiv.org
- Ggithub.com
- +10
HTML
<div class="aia-web-search-sources" role="status" aria-label="Searching the web">
<div class="aia-web-search-sources-head">
<svg class="aia-web-search-sources-lens" viewBox="0 0 24 24" aria-hidden="true"><circle cx="10.5" cy="10.5" r="6"/><path d="m15 15 4.5 4.5"/></svg>
<span>Searching the web</span>
<span class="aia-web-search-sources-count">14 sources</span>
</div>
<ul class="aia-web-search-sources-chips">
<li style="--i: 0"><b style="--f: #fff; --g: #111">W</b>wikipedia.org</li>
<li style="--i: 1"><b style="--f: #5a2ee0">V</b>theverge.com</li>
<li style="--i: 2"><b style="--f: #b31b1b">a</b>arxiv.org</li>
<li style="--i: 3"><b style="--f: #24292f">G</b>github.com</li>
<li style="--i: 4">+10</li>
</ul>
</div>CSS
.aia-web-search-sources {
--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;
width: 23em;
max-width: 100%;
}
.aia-web-search-sources-head {
display: flex;
align-items: center;
gap: 0.5em;
font-weight: 500;
}
.aia-web-search-sources-lens {
width: 1.2em;
height: 1.2em;
fill: none;
stroke: var(--c);
stroke-width: 2.2;
stroke-linecap: round;
animation: aia-web-search-sources-orbit 1.8s linear infinite;
}
.aia-web-search-sources-count {
margin-left: auto;
font-size: 0.85em;
font-weight: 400;
color: color-mix(in srgb, currentColor 55%, transparent);
animation: aia-web-search-sources-count 7s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
.aia-web-search-sources-chips {
display: flex;
flex-wrap: wrap;
gap: 0.4em;
margin: 0.75em 0 0;
padding: 0;
list-style: none;
}
.aia-web-search-sources-chips li {
display: inline-flex;
align-items: center;
gap: 0.45em;
padding: 0.28em 0.7em 0.28em 0.3em;
border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
border-radius: 99em;
background: color-mix(in srgb, currentColor 4%, transparent);
font-size: 0.85em;
color: color-mix(in srgb, currentColor 75%, transparent);
animation: aia-web-search-sources-pop 7s infinite both;
animation-delay: calc(var(--i) * 0.16s);
}
.aia-web-search-sources-chips li:last-child {
padding-left: 0.7em;
color: color-mix(in srgb, currentColor 55%, transparent);
}
.aia-web-search-sources-chips b {
display: grid;
place-items: center;
width: 1.55em;
height: 1.55em;
border-radius: 50%;
background: var(--f);
box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent);
color: var(--g, #fff);
font: 700 0.78em / 1 system-ui, sans-serif;
}
@keyframes aia-web-search-sources-orbit {
from { transform: rotate(0deg) translateX(0.12em) rotate(0deg); }
to { transform: rotate(360deg) translateX(0.12em) rotate(-360deg); }
}
@keyframes aia-web-search-sources-pop {
0%, 8% {
opacity: 0;
transform: translateY(0.4em) scale(0.8);
animation-timing-function: cubic-bezier(0.3, 1.5, 0.5, 1);
}
15%, 80% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }
86%, 100% { opacity: 0; transform: translateY(-0.2em) scale(0.97); }
}
@keyframes aia-web-search-sources-count {
0%, 30% { opacity: 0; transform: translateX(-0.3em); }
38%, 80% { opacity: 1; transform: none; }
86%, 100% { opacity: 0; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.aia-web-search-sources-lens,
.aia-web-search-sources-count,
.aia-web-search-sources-chips li { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
.aia-web-search-sources, .aia-web-search-sources *, .aia-web-search-sources::before, .aia-web-search-sources::after, .aia-web-search-sources *::before, .aia-web-search-sources *::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.