Searching State
A copy-paste command palette component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Command PaletteHTMLCSSany framework
Copy into your project
HTML
<!-- Searching State — spinning lens + shimmering result placeholders -->
<div class="nuda-cmdksrch">
<span class="nuda-cmdksrch__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="7" />
<path d="M21 21 L16 16" />
</svg>
</span>
<div class="nuda-cmdksrch__lines">
<span class="nuda-cmdksrch__line" style="width: 70%"></span>
<span class="nuda-cmdksrch__line" style="width: 55%"></span>
<span class="nuda-cmdksrch__line" style="width: 82%"></span>
</div>
</div>CSS
/* Searching State
Loading state inside a command palette while results stream in.
Customize: --sr-accent */
.nuda-cmdksrch {
--sr-accent: #e4ff54;
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px;
width: 100%;
max-width: 320px;
}
.nuda-cmdksrch__icon {
flex-shrink: 0;
width: 22px;
height: 22px;
color: var(--sr-accent);
animation: nuda-sr-spin 1.4s linear infinite;
filter: drop-shadow(0 0 4px rgba(228, 255, 84, 0.4));
}
.nuda-cmdksrch__icon svg { width: 100%; height: 100%; }
.nuda-cmdksrch__lines {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 3px;
}
.nuda-cmdksrch__line {
height: 8px;
border-radius: 4px;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.04) 25%,
rgba(228, 255, 84, 0.15) 50%,
rgba(255, 255, 255, 0.04) 75%
);
background-size: 200% 100%;
animation: nuda-sr-shim 1.5s ease-in-out infinite;
}
@keyframes nuda-sr-spin { to { transform: rotate(360deg); } }
@keyframes nuda-sr-shim {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.nuda-cmdksrch__icon,
.nuda-cmdksrch__line { animation: none; }
}How to use Searching State
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.