Theme:

Skeleton

Skeletons are placeholder shapes that indicate loading content. They come in text, circle, and rectangle variants.

Text Skeleton

<div class="dui-skeleton dui-skeleton-text" style="width: 100%"></div> <div class="dui-skeleton dui-skeleton-text" style="width: 80%"></div> <div class="dui-skeleton dui-skeleton-text" style="width: 60%"></div>

Circle Skeleton

<div class="dui-skeleton dui-skeleton-circle"></div> <div class="dui-skeleton dui-skeleton-circle" style="width: 4rem; height: 4rem;"></div>

Rectangle Skeleton

<div class="dui-skeleton dui-skeleton-rect"></div> <div class="dui-skeleton dui-skeleton-rect" style="height: 12rem"></div>

Card Loading Example

<div class="dui-card dui-card-bordered"> <div class="dui-card-body"> <div style="display: flex; gap: 0.75rem; align-items: center;"> <div class="dui-skeleton dui-skeleton-circle"></div> <div> <div class="dui-skeleton dui-skeleton-text" style="width: 60%"></div> <div class="dui-skeleton dui-skeleton-text" style="width: 40%"></div> </div> </div> <div class="dui-skeleton dui-skeleton-rect"></div> <div class="dui-skeleton dui-skeleton-text" style="width: 90%"></div> </div> </div>