Conic Spin
A copy-paste spinners component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
SpinnersHTMLCSSany framework
Copy into your project
HTML
<!-- Conic Spin Spinner -->
<div class="nuda-conicspin" role="status" aria-label="Loading"></div>CSS
/* Conic Spin Spinner
A full conic-gradient sweep masked into a ring.
Customize: --conicspin-color, --conicspin-size */
.nuda-conicspin {
--conicspin-color: #e4ff54;
--conicspin-size: 40px;
width: var(--conicspin-size);
height: var(--conicspin-size);
border-radius: 50%;
background: conic-gradient(from 0deg, #09090b, var(--conicspin-color));
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
animation: nuda-conicspin 1.1s linear infinite;
will-change: transform;
}
@keyframes nuda-conicspin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.nuda-conicspin { animation: none; opacity: 0.6; }
}How to use Conic Spin
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.