Search Input Loading Spinner
A real search input with a magnifier on the left and a small ring spinner at the right end while results load. Everything is sized in em from one font size, so it scales as a unit.
Also known as: search bar loading, input with spinner, autocomplete loading indicator.
HTML
<div class="ldr-search-input-spinner" role="status" aria-label="Searching"> <svg class="ldr-search-input-spinner-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="M16 16l4.5 4.5"/></svg> <input class="ldr-search-input-spinner-field" type="search" value="css loaders" aria-label="Search"> <span class="ldr-search-input-spinner-ring" aria-hidden="true"></span> </div>
CSS
.ldr-search-input-spinner {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
display: flex;
align-items: center;
gap: 0.55em;
box-sizing: border-box;
width: calc(var(--s) * 4.6);
height: 2.7em;
padding: 0 0.85em;
border-radius: 0.8em;
background: color-mix(in srgb, var(--ldr-color, #3b82f6) 5%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent), 0 0 0 0.25em color-mix(in srgb, var(--ldr-color, #3b82f6) 14%, transparent);
font: 400 calc(var(--s) / 3) / 1 system-ui, sans-serif;
color: color-mix(in srgb, currentColor 88%, transparent);
}
.ldr-search-input-spinner-icon {
flex: none;
width: 1.2em;
height: 1.2em;
fill: none;
stroke: color-mix(in srgb, currentColor 55%, transparent);
stroke-width: 2.2;
stroke-linecap: round;
}
.ldr-search-input-spinner-field {
flex: 1;
min-width: 0;
padding: 0;
border: 0;
outline: 0;
background: none;
font: inherit;
color: inherit;
-webkit-appearance: none;
appearance: none;
}
.ldr-search-input-spinner-field::-webkit-search-cancel-button { display: none; }
.ldr-search-input-spinner-ring {
flex: none;
width: 1.1em;
height: 1.1em;
box-sizing: border-box;
border: 0.15em solid color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
border-top-color: var(--c);
border-radius: 50%;
animation: ldr-search-input-spinner-spin 0.7s linear infinite;
}
@keyframes ldr-search-input-spinner-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.ldr-search-input-spinner, .ldr-search-input-spinner *, .ldr-search-input-spinner::before, .ldr-search-input-spinner::after, .ldr-search-input-spinner *::before, .ldr-search-input-spinner *::after {
animation-duration: 3s;
}
}Customizing this loader
- Color: set
--ldr-coloron the element or a parent. Currently previewing#3b82f6. - Size: set
--ldr-size. Every dimension in the snippet is derived from it. Currently previewing64px. - Speed: change the duration on the
animationshorthand. Delays on the children are relative, so they keep their rhythm. - Accessibility: the root carries
role="status"and anaria-labelso screen readers announce the wait. The reduced-motion rule at the end slows the animation for users who asked for less motion.