Skip to content

Comment 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-skcomment">
  <span class="nuda-skcomment__avatar"></span>
  <div class="nuda-skcomment__body">
    <div class="nuda-skcomment__head">
      <span class="nuda-skcomment__name"></span>
      <span class="nuda-skcomment__time"></span>
    </div>
    <span class="nuda-skcomment__line" style="width:85%"></span>
    <span class="nuda-skcomment__line" style="width:60%"></span>
  </div>
</div>
CSS
.nuda-skcomment {
  display: flex;
  gap: 10px;
  padding: 12px;
  width: 100%;
  max-width: 280px;
}

.nuda-skcomment__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  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-skcomment__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nuda-skcomment__head {
  display: flex;
  gap: 10px;
  margin-bottom: 2px;
}

.nuda-skcomment__name {
  width: 80px;
  height: 9px;
  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-skcomment__time {
  width: 40px;
  height: 9px;
  border-radius: 3px;
  background: rgba(255,255,255,.06);
}

.nuda-skcomment__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;
}

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

@media (prefers-reduced-motion:reduce) {
  .nuda-skcomment__avatar,.nuda-skcomment__name,.nuda-skcomment__line {
    animation: none;
  }
}

How to use Comment 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