Loading States

<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
<Spinner size="xl" />

<Spinner color="current" />
<Spinner color="accent" />
<Spinner color="success" />

{/* User profile skeleton */}
<div className="flex items-center gap-4">
  <Skeleton className="h-12 w-12 rounded-full" />
  <div className="flex flex-1 flex-col gap-2">
    <Skeleton className="h-4 w-3/4 rounded" />
    <Skeleton className="h-3 w-1/2 rounded" />
  </div>
</div>

{/* Card skeleton */}
<Skeleton className="h-24 w-full rounded-lg" />