Skip to content

Video 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-skvid">
  <span class="nuda-skvid__player">
    <span class="nuda-skvid__play"></span>
  </span>
  <span class="nuda-skvid__title" style="width:80%"></span>
  <div class="nuda-skvid__meta">
    <span class="nuda-skvid__avatar"></span>
    <span class="nuda-skvid__name"></span>
  </div>
</div>
CSS
.nuda-skvid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 220px;
}

.nuda-skvid__player {
  position: relative;
  height: 120px;
  border-radius: 8px;
  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;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nuda-skvid__play {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
}

.nuda-skvid__title {
  height: 11px;
  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;
  animation-delay: .1s;
}

.nuda-skvid__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nuda-skvid__avatar {
  width: 20px;
  height: 20px;
  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-skvid__name {
  flex: 1;
  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-skvid__player,.nuda-skvid__title,.nuda-skvid__avatar,.nuda-skvid__name {
    animation: none;
  }
}

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