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

# LoadingHeartbeatStrip

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

> Mono status row that separates request identity from live loading state.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/LoadingHeartbeatStrip.md#theme-key-LoadingHeartbeatStrip-root) | 2 classes | Mono status row that separates request identity from live loading state. |
| [id](/v3/reference/theming/keys/LoadingHeartbeatStrip.md#theme-key-LoadingHeartbeatStrip-id) | `flex items-center gap-1.5 min-w-0 shrink truncate` | Truncated request identifier group on the leading side of the strip. |
| [status](/v3/reference/theming/keys/LoadingHeartbeatStrip.md#theme-key-LoadingHeartbeatStrip-status) | `flex items-center gap-1.5 shrink-0` | Trailing status group for dependency count and heartbeat dot. |
| [dot](/v3/reference/theming/keys/LoadingHeartbeatStrip.md#theme-key-LoadingHeartbeatStrip-dot) | 2 classes | Default heartbeat dot using the primary loading tint. |
| [dotSlow](/v3/reference/theming/keys/LoadingHeartbeatStrip.md#theme-key-LoadingHeartbeatStrip-dotSlow) | 2 classes | Slow-path heartbeat dot using the warning tint. |

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

## root

> Mono status row that separates request identity from live loading state.

Default classes:

```text
flex items-center justify-between gap-4
font-mono text-[11px] leading-none text-muted-foreground
```

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

<a id="theme-key-LoadingHeartbeatStrip-id"></a>

## id

> Truncated request identifier group on the leading side of the strip.

Default classes:

`flex items-center gap-1.5 min-w-0 shrink truncate`

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

<a id="theme-key-LoadingHeartbeatStrip-status"></a>

## status

> Trailing status group for dependency count and heartbeat dot.

Default classes:

`flex items-center gap-1.5 shrink-0`

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

<a id="theme-key-LoadingHeartbeatStrip-dot"></a>

## dot

> Default heartbeat dot using the primary loading tint.

Default classes:

```text
inline-block w-1.5 h-1.5 rounded-full bg-primary text-primary
animate-vueda-heartbeat-pulse
```

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

<a id="theme-key-LoadingHeartbeatStrip-dotSlow"></a>

## dotSlow

> Slow-path heartbeat dot using the warning tint.

Default classes:

```text
inline-block w-1.5 h-1.5 rounded-full bg-warning text-warning
animate-vueda-heartbeat-pulse
```

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