Skeleton

vel-src: skeleton.css

Animated placeholder shapes that represent loading content, reducing perceived wait time and layout shift.

Class	Properties
vel-skeleton	Base skeleton element with shimmer animation
vel-skeleton-text	Short rounded bar representing a line of text
vel-skeleton-circle	Circular skeleton for avatars or icons
vel-skeleton-rect	Rectangular skeleton for images or cards
vel-skeleton-xs	Extra-small size variant (height: 0.5rem)
vel-skeleton-sm	Small size variant (height: 0.75rem)
vel-skeleton-md	Medium size variant (height: 1rem)
vel-skeleton-lg	Large size variant (height: 1.5rem)
vel-skeleton-xl	Extra-large size variant (height: 2rem)
vel-skeleton-2xl	2x extra-large size variant (height: 3rem)
vel-skeleton-3xl	3x extra-large size variant (height: 4rem)
vel-skeleton-avatar-sm	Small circular avatar skeleton (32px)
vel-skeleton-avatar	Default circular avatar skeleton (48px)
vel-skeleton-avatar-lg	Large circular avatar skeleton (64px)
vel-skeleton-avatar-xl	Extra-large circular avatar skeleton (96px)

Examples

Card skeleton

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif">
  <div style="display:flex;align-items:flex-start;gap:16px;max-width:320px;">
    <div class="vel-skeleton vel-skeleton-avatar"></div>
    <div style="flex:1;display:flex;flex-direction:column;gap:8px;">
      <div class="vel-skeleton vel-skeleton-text" style="width:60%"></div>
      <div class="vel-skeleton vel-skeleton-text" style="width:90%"></div>
      <div class="vel-skeleton vel-skeleton-text" style="width:75%"></div>
      <div class="vel-skeleton vel-skeleton-text vel-skeleton-sm" style="width:40%"></div>
    </div>
  </div>
</div>

Text lines

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif">
  <div style="display:flex;flex-direction:column;gap:10px;max-width:400px;">
    <div class="vel-skeleton vel-skeleton-text vel-skeleton-lg" style="width:55%"></div>
    <div class="vel-skeleton vel-skeleton-text" style="width:100%"></div>
    <div class="vel-skeleton vel-skeleton-text" style="width:92%"></div>
    <div class="vel-skeleton vel-skeleton-text" style="width:85%"></div>
    <div class="vel-skeleton vel-skeleton-text" style="width:70%"></div>
  </div>
</div>