---
url: "https://vueda.dev/v3/reference/theming/keys/LoadingSkeletonGhost.md"
title: "LoadingSkeletonGhost"
---

# LoadingSkeletonGhost

Source: `client/lib/theme/vueda-tailwind/display/index.js`

> Bordered placeholder card with the shimmer overlay owned by this loading preview.

Vue component: [LoadingSkeletonGhost](/v3/reference/api/vue/LoadingSkeletonGhost.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/LoadingSkeletonGhost.md#theme-key-LoadingSkeletonGhost-root) | 6 classes | Bordered placeholder card with the shimmer overlay owned by this loading preview. |
| [bar](/v3/reference/theming/keys/LoadingSkeletonGhost.md#theme-key-LoadingSkeletonGhost-bar) | `h-[10px]` | Individual skeleton bar height; each bar receives its width from component inline style. |

<a id="theme-key-LoadingSkeletonGhost-root"></a>

## root

> Bordered placeholder card with the shimmer overlay owned by this loading preview.

Default classes:

```text
relative overflow-hidden
rounded-vueda-card hairline hairline-border bg-background
flex flex-col gap-3 p-4
before:content-[''] before:absolute before:inset-0 before:pointer-events-none
before:bg-gradient-to-r before:from-transparent before:via-foreground/[0.04] before:to-transparent
before:translate-x-[-100%] before:animate-vueda-skeleton-shimmer
```

Source: `client/lib/theme/vueda-tailwind/display/LoadingSkeletonGhost.theme.js:16`

<a id="theme-key-LoadingSkeletonGhost-bar"></a>

## bar

> Individual skeleton bar height; each bar receives its width from component inline style.

Default classes:

`h-[10px]`

Source: `client/lib/theme/vueda-tailwind/display/LoadingSkeletonGhost.theme.js:27`