A placeholder component that mimics content layout during loading.
<div class="sk-card"> <div class="sk sk-circle" style="width:48px;height:48px;flex-shrink:0;"></div> <div class="sk-lines"> <div class="sk sk-line"></div> <div class="sk sk-line w60"></div> <div class="sk sk-line w40"></div> </div> </div> <div class="sk sk-rect"></div>
Installation
Built with pure HTML and CSS. Include ds-shared.css in your project.
pnpm add @norbielink/ds
Examples
Card skeleton
<div style="width:300px;border:1px solid #e8e8e8;border-radius:10px;overflow:hidden;"> <div class="sk" style="width:100%;height:120px;border-radius:0;"></div> <div style="padding:16px;display:flex;flex-direction:column;gap:8px;"> <div class="sk sk-line w80"></div> <div class="sk sk-line w60"></div> </div> </div>
API Reference
Classes
| Class | Description |
|---|---|
sk | Base skeleton with shimmer animation |
sk-circle | Circular shape (border-radius:50%) |
sk-rect | Rectangular block (160px height) |
sk-line | Text line skeleton (12px height) |
sk-line.w60 | Line at 60% width (also w80, w40) |
sk-dk | Dark mode shimmer |