Audio Loading
A copy-paste audio & waveforms component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Audio & WaveformsHTMLCSSany framework
Buffering
Copy into your project
HTML
<div class="nuda-aload">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="nuda-aload__text">Buffering</span>
</div>CSS
.nuda-aload span:not(.nuda-aload__text) {
width: 3px;
height: 14px;
background: #e4ff54;
border-radius: 1px;
animation: nuda-aload-bar 1.4s ease-in-out infinite;
}
.nuda-aload span:nth-child(2) { animation-delay: 0.1s; }
.nuda-aload span:nth-child(3) { animation-delay: 0.2s; }
.nuda-aload span:nth-child(4) { animation-delay: 0.3s; }
.nuda-aload span:nth-child(5) { animation-delay: 0.4s; }
@keyframes nuda-aload-bar {
0%, 100% { transform: scaleY(0.3); }
50% { transform: scaleY(1); }
}How to use Audio Loading
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.