Feedback

Skeleton

Use .quanta-skeleton to show loading placeholders before real content appears. Multiple size and shape presets make it easy to match your UI.

Built‑in Presets

Apply one of the following modifier classes alongside .quanta-skeleton:

<div class="quanta-skeleton quanta-skeleton-title"></div>
<div class="quanta-skeleton quanta-skeleton-text"></div>
<div class="quanta-skeleton quanta-skeleton-circle"></div>
<div class="quanta-skeleton quanta-skeleton-avatar-sm"></div>
<div class="quanta-skeleton quanta-skeleton-rect"></div>
<div class="quanta-skeleton quanta-skeleton-btn"></div>
        

Usage Example

Wrap your content container in skeleton elements until data loads:

<div class="profile-card">
  <div class="quanta-skeleton quanta-skeleton-circle"></div>
  <h2 class="quanta-skeleton quanta-skeleton-title"></h2>
  <p class="quanta-skeleton quanta-skeleton-text"></p>
  <button class="quanta-skeleton quanta-skeleton-btn"></button>
</div>
        

Custom Content

After loading, you can replace the skeleton with real content by removing the .quanta-skeleton classes and inserting text or images.

Responsive & Dark Mode

On small screens, preset sizes adjust automatically. In dark mode, backgrounds and wave highlight adapt for better visibility.