Skeleton - Laravel Blade

Use the skeleton component to indicate a loading state.

Variants

Text

Loading...

Card

Loading...

Image

Loading...

List

Loading...

Blade code

<div class="space-y-8">
    <div>
        <h3 class="mb-2 text-lg font-medium text-gray-900 dark:text-white">Text</h3>
        <x-fwb.skeleton variant="text" />
    </div>
    <div>
        <h3 class="mb-2 text-lg font-medium text-gray-900 dark:text-white">Card</h3>
        <x-fwb.skeleton variant="card" />
    </div>
    <div>
        <h3 class="mb-2 text-lg font-medium text-gray-900 dark:text-white">Image</h3>
        <x-fwb.skeleton variant="image" />
    </div>
    <div>
        <h3 class="mb-2 text-lg font-medium text-gray-900 dark:text-white">List</h3>
        <x-fwb.skeleton variant="list" />
    </div>
</div>