Skeleton

A loading indicator shown while content is being fetched.

Nuxt UI

Git

Usage

Details

<template>
  <div class="flex items-center gap-4">
    <B24Skeleton class="h-12 w-12 rounded-full" />

    <div class="grid gap-2">
      <B24Skeleton class="h-4 w-[250px]" />
      <B24Skeleton class="h-4 w-[200px]" />
    </div>
  </div>
</template>

Examples

Something more complex

Example of a loading indicator for a task creation form.

Details

<template>
  <div class="w-full flex flex-col flex-nowrap p-4 bg-base-50 dark:bg-base-dark">
    <div class="mb-4 flex flex-row flex-nowrap items-center justify-between gap-2 ">
      <B24Skeleton class="ml-xs2 h-xs2 w-[38%] rounded-3xs" />
      <div class="flex flex-row flex-nowrap items-center justify-between gap-4">
        <div class="border-2 border-gray-200 dark:border-gray-800 size-[40px] rounded-2xs flex items-center justify-center">
          <B24Skeleton class="h-xs2 w-[10px] rounded-3xs" />
        </div>
        <div class="border-2 border-gray-200 dark:border-gray-800 h-[40px] w-[150px] px-lg rounded-2xs flex items-center justify-center">
          <B24Skeleton class="h-xs2 w-full rounded-3xs" />
        </div>
      </div>
    </div>
    <div class="bg-white dark:bg-white/10 rounded-md p-lg flex flex-col flex-nowrap items-start justify-between">
      <div class="mb-12 w-full flex flex-col items-start justify-start gap-2">
        <B24Skeleton class="h-xs2 w-[76%] rounded-3xs mb-1.5" />
        <B24Skeleton class="h-xs w-[76%] rounded-3xs" />
        <B24Skeleton class="h-xs w-[76%] rounded-3xs" />
        <B24Skeleton class="h-xs w-[40%] rounded-3xs" />
      </div>

      <div class="mb-3 bg-gray-20 dark:bg-gray-900 w-full h-14 rounded-md" />
      <div class="mb-6 bg-gray-20 dark:bg-gray-900 w-full h-40 rounded-md" />
      <B24Skeleton class="mb-4 h-xs w-[42%] rounded-3xs" />
      <div class="mb-4 pt-4 w-full flex flex-row flex-nowrap items-center justify-between gap-2 border-t-1 border-t-gray-100 dark:border-t-gray-900 overflow-hidden">
        <div class="flex flex-row flex-nowrap items-center justify-between gap-4">
          <div class="bg-green-350 dark:bg-green-800 h-[40px] w-[100px] px-lg rounded-2xs flex items-center justify-center">
            <B24Skeleton class="h-xs2 w-full rounded-3xs bg-gray-50" />
          </div>
          <div class="border-2 border-gray-200 dark:border-gray-800 h-[40px] w-[150px] px-lg rounded-2xs flex items-center justify-center">
            <B24Skeleton class="h-xs2 w-full rounded-3xs" />
          </div>
        </div>
        <div class="flex flex-row flex-nowrap items-center justify-between gap-4">
          <div class="w-[140px]">
            <B24Skeleton class="h-xs2 w-full rounded-3xs" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

API

Props

Prop	Default	Type
as	'div'	any The element or component this component should render as.

Slots

Slot	Type
default	{}