Sync Spinner
A copy-paste indicators component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
IndicatorsHTMLCSSany framework
Copy into your project
HTML
<div class="nuda-sync-spinner" role="status" aria-label="Syncing">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
<path d="M21 2v6h-6" />
<path d="M3 12a9 9 0 0 1 15-6.7L21 8" />
<path d="M3 22v-6h6" />
<path d="M21 12a9 9 0 0 1-15 6.7L3 16" />
</svg>
</div>CSS
/* Sync Spinner
Small rotating sync/refresh icon.
Customize: --sync-size, --sync-color */
.nuda-sync-spinner {
--sync-size: 20px;
--sync-color: #a0a0a0;
width: var(--sync-size);
height: var(--sync-size);
color: var(--sync-color);
animation: nuda-sync-rotate 0.8s linear infinite;
will-change: transform;
}
.nuda-sync-spinner svg {
width: 100%;
height: 100%;
}
@keyframes nuda-sync-rotate {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.nuda-sync-spinner {
animation: none;
}
}How to use Sync Spinner
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.