Skeleton
Use to show a placeholder while content is loading.
Usage
Basic Skeleton
<twig:ui:Card role="status" class="space-y-3 p-6 bg-white rounded-lg border"> <div class="flex items-center space-x-4"> <twig:ui:Skeleton class="h-12 w-12 rounded-full"></twig:ui:Skeleton> <div class="space-y-2.5 max-w-lg"> <twig:ui:Skeleton class="h-4 w-[250px]"/> <twig:ui:Skeleton class="h-4 w-[200px]"/> </div> </div> <div class="flex flex-col space-y-2.5 max-w-lg"> <div class="flex items-center w-full space-x-2"> <twig:ui:Skeleton class="h-2.5 w-32"></twig:ui:Skeleton> <twig:ui:Skeleton class="h-2.5 w-24"></twig:ui:Skeleton> <twig:ui:Skeleton class="h-2.5 w-full"></twig:ui:Skeleton> </div> <div class="flex items-center w-full space-x-2"> <twig:ui:Skeleton class="h-2.5 w-full"></twig:ui:Skeleton> <twig:ui:Skeleton class="h-2.5 w-full"></twig:ui:Skeleton> <twig:ui:Skeleton class="h-2.5 w-24"></twig:ui:Skeleton> </div> <div class="flex items-center w-full space-x-2"> <twig:ui:Skeleton class="h-2.5 w-full"></twig:ui:Skeleton> <twig:ui:Skeleton class="h-2.5 w-80"></twig:ui:Skeleton> <twig:ui:Skeleton class="h-2.5 w-full"></twig:ui:Skeleton> </div> <div class="flex items-center w-full space-x-2"> <twig:ui:Skeleton class="h-2.5 w-full"></twig:ui:Skeleton> <twig:ui:Skeleton class="h-2.5 w-full"></twig:ui:Skeleton> <twig:ui:Skeleton class="h-2.5 w-24"></twig:ui:Skeleton> </div> <div class="flex items-center w-full space-x-2"> <twig:ui:Skeleton class="h-2.5 w-32"></twig:ui:Skeleton> <twig:ui:Skeleton class="h-2.5 w-24"></twig:ui:Skeleton> <twig:ui:Skeleton class="h-2.5 w-full"></twig:ui:Skeleton> </div> <div class="flex items-center w-full space-x-2"> <twig:ui:Skeleton class="h-2.5 w-full"></twig:ui:Skeleton> <twig:ui:Skeleton class="h-2.5 w-80"></twig:ui:Skeleton> <twig:ui:Skeleton class="h-2.5 w-full"></twig:ui:Skeleton> </div> <span class="sr-only">Loading...</span> </div> </twig:ui:Card>