Gradient Spinner Bar
A copy-paste loaders component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
LoadersHTMLCSSany framework
Copy into your project
HTML
<!-- Gradient Spinner Bar Loader -->
<div class="nuda-gradient-spinner-bar" role="status" aria-label="Loading"></div>CSS
/* Gradient Spinner Bar Loader
Rotating conic-gradient arc, masked into a ring.
Customize: --gsbar-color, --gsbar-size */
.nuda-gradient-spinner-bar {
--gsbar-color: #e4ff54;
--gsbar-size: 42px;
width: var(--gsbar-size);
height: var(--gsbar-size);
border-radius: 50%;
background: conic-gradient(
from 0deg,
transparent 0deg,
var(--gsbar-color) 90deg,
transparent 180deg,
transparent 360deg
);
-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-gradient-spinner-bar 1s linear infinite;
will-change: transform;
}
@keyframes nuda-gradient-spinner-bar {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.nuda-gradient-spinner-bar { animation: none; opacity: 0.6; }
}How to use Gradient Spinner Bar
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.