Skeleton

A placeholder shown while content loads.

import { BuiSkeleton } from 'ng-blatui';

<div buiSkeleton class="size-12 rounded-full"></div>
<div buiSkeleton class="h-4 w-[250px]"></div>

Card

<div buiSkeleton class="h-40 w-full rounded-xl"></div>
<div buiSkeleton class="h-4 w-full"></div>
<div buiSkeleton class="h-4 w-3/4"></div>

List

@for (i of [1, 2, 3]; track i) {
  <div class="flex items-center gap-4">
    <div buiSkeleton class="size-10 rounded-full"></div>
    <div buiSkeleton class="h-4 w-1/2"></div>
  </div>
}

Table

<div class="rounded-md border">
  <div class="flex gap-4 border-b px-4 py-3">
    <div buiSkeleton class="h-4 w-24"></div>
    <div buiSkeleton class="h-4 w-32"></div>
  </div>
</div>