Bouncing Balls
A copy-paste loaders component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
LoadersHTMLCSSany framework
Copy into your project
HTML
<!-- Bouncing Balls Loader -->
<div class="nuda-bouncing-balls" role="status" aria-label="Loading">
<span></span>
<span></span>
<span></span>
</div>CSS
/* Bouncing Balls Loader
Three balls bouncing in sequence with eased physics.
Customize: --bounce-color, --bounce-size */
.nuda-bouncing-balls {
--bounce-color: #34d399;
--bounce-size: 10px;
display: flex;
align-items: flex-end;
gap: 6px;
height: 40px;
padding: 8px;
}
.nuda-bouncing-balls span {
width: var(--bounce-size);
height: var(--bounce-size);
background: var(--bounce-color);
border-radius: 50%;
animation: nuda-bouncing-balls 1.4s ease infinite;
will-change: transform;
}
.nuda-bouncing-balls span:nth-child(2) { animation-delay: 0.2s; }
.nuda-bouncing-balls span:nth-child(3) { animation-delay: 0.4s; }
@keyframes nuda-bouncing-balls {
0%, 100% {
transform: translateY(0);
}
30% {
transform: translateY(-24px);
}
50% {
transform: translateY(0);
}
65% {
transform: translateY(-8px);
}
80% {
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.nuda-bouncing-balls span {
animation: none;
opacity: 0.6;
}
}How to use Bouncing Balls
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.