---
url: "https://vueda.dev/v3/reference/api/vue/LoadingHeartbeatStrip.md"
title: "LoadingHeartbeatStrip"
---

# LoadingHeartbeatStrip

## Overview

Live-updating status footer for loading views. Renders a flex justify-between
strip with mono text: request id and elapsed time on the left, resolved/total
dependency count and a pulsing dot on the right. The dot animates a box-shadow
halo; `tone="slow"` flips it from primary blue to amber to signal an unusually
long wait.

Theme entry: [LoadingHeartbeatStrip](/v3/reference/theming/keys/LoadingHeartbeatStrip.md)

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="prop-themeOverride">themeOverride</span> | `Object` |  | `null` | A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants. |
| <span id="prop-requestId">requestId</span> | `string` |  | `undefined` | Request identifier displayed on the left. |
| <span id="prop-elapsedMs">elapsedMs</span> | `number` |  | `undefined` | Elapsed time in milliseconds. Formatted as `ms` below 1000, `s` at or above. |
| <span id="prop-resolved">resolved</span> | `number` |  | `undefined` | Number of resolved dependencies. |
| <span id="prop-total">total</span> | `number` |  | `undefined` | Total number of dependencies. |
| <span id="prop-tone">tone</span> | `string` |  | `"default"` | Visual tone. `slow` flips the pulsing dot to amber. |
| <span id="prop-class">class</span> | `import('vue').HTMLAttributes['class']` |  | `undefined` | Additional CSS classes applied to the root element. |

## Source

`client/lib/display/loading/LoadingHeartbeatStrip.vue`