Skip to content

Feed 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-skfeed">
  <div class="nuda-skfeed__post">
    <div class="nuda-skfeed__head">
      <span class="nuda-skfeed__avatar"></span>
      <span class="nuda-skfeed__name"></span>
    </div>
    <span class="nuda-skfeed__line" style="width:90%"></span>
    <span class="nuda-skfeed__line" style="width:60%"></span>
    <span class="nuda-skfeed__img"></span>
  </div>
</div>
CSS
.nuda-skfeed {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 240px;
}

.nuda-skfeed__post {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
}

.nuda-skfeed__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.nuda-skfeed__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.1),rgba(255,255,255,.04));
  background-size: 200% 100%;
  animation: _skShim 1.6s linear infinite;
}

.nuda-skfeed__name {
  width: 60px;
  height: 8px;
  border-radius: 3px;
  background: linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.1),rgba(255,255,255,.04));
  background-size: 200% 100%;
  animation: _skShim 1.6s linear infinite;
}

.nuda-skfeed__line {
  height: 8px;
  border-radius: 3px;
  background: linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.1),rgba(255,255,255,.04));
  background-size: 200% 100%;
  animation: _skShim 1.6s linear infinite;
}

.nuda-skfeed__img {
  margin-top: 4px;
  height: 50px;
  border-radius: 6px;
  background: linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.1),rgba(255,255,255,.04));
  background-size: 200% 100%;
  animation: _skShim 1.6s linear infinite;
}

@keyframes _skShim {
  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-skfeed__post * {
    animation: none;
  }
}

How to use Feed 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.

More skeletons components

← Browse all NudaUI components