Wave Skeleton
A copy-paste skeletons component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
SkeletonsHTMLCSSany framework
Copy into your project
HTML
<div class="nuda-skwave" aria-hidden="true">
<span class="nuda-skwave__block"></span>
<span class="nuda-skwave__block" style="width:75%"></span>
<span class="nuda-skwave__block" style="width:55%"></span>
</div>CSS
/* Wave Skeleton
Blocks with a lime highlight wave traveling across them in sequence
(background-position only).
Customize: --skwave-glow */
.nuda-skwave {
--skwave-glow: rgba(228, 255, 84, 0.18);
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px;
width: 100%;
max-width: 240px;
}
.nuda-skwave__block {
height: 14px;
border-radius: 5px;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.05) 0%,
rgba(255, 255, 255, 0.05) 40%,
var(--skwave-glow) 50%,
rgba(255, 255, 255, 0.05) 60%,
rgba(255, 255, 255, 0.05) 100%
);
background-size: 220% 100%;
animation: nuda-skwave 1.6s ease-in-out infinite;
}
.nuda-skwave__block:nth-child(2) { animation-delay: 0.18s; }
.nuda-skwave__block:nth-child(3) { animation-delay: 0.36s; }
@keyframes nuda-skwave {
0% { background-position: 120% 0; }
100% { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
.nuda-skwave__block { animation: none; background-position: 50% 0; }
}How to use Wave Skeleton
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.