# LoaderText

> Text with a moving shimmer while something loads, crossfading to a done label when it finishes.

URL: https://apogee.avaui.dev/docs/loader-text
Last updated: 2026-10-15

Text with a moving shimmer while something loads, crossfading to a done label when it finishes.

Last updated October 15, 2026

Uses JavaScript

None. Flip `data-completed` on the root (or re-render with `completed`) to crossfade to `completedText`.

**Without JS:** Nothing changes: the shimmer is CSS, and the done label shows as soon as you render completed.

```astro
<LoaderText>Generating a summary…</LoaderText>
<LoaderText completed completedText="Done">Generating a summary…</LoaderText>
```

## Add

```sh
npx @ava-ui/apogee add loader-text
```

No dependencies.

## Usage

```astro
---
import LoaderText from '@/components/apogee/LoaderText/LoaderText.astro'
---
<LoaderText completedText="Saved" completed={isSaved}>Saving…</LoaderText>
```

## API

`@composable` — exposed to Content Editors in AVA. Any other attribute passes through to the root `<span>`.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `completed` | `boolean` | `false` | Stops the shimmer and shows `completedText`. |
| `completedText` | `string` | — | The finished label. Without it the text just stops shimmering. |
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Text size. |
| `weight` | `'regular' \| 'medium' \| 'semibold'` | `'medium'` | Text weight. |
| `class` | `string` | — | Extra classes, merged last. |

Slots: default (the loading text), `icon` (leading icon, fades out when completed).

## Sizes and weights

```astro
<LoaderText size="small">Thinking…</LoaderText>
<LoaderText size="medium">Thinking…</LoaderText>
<LoaderText size="large">Thinking…</LoaderText>
<LoaderText weight="regular">Thinking…</LoaderText>
<LoaderText weight="medium">Thinking…</LoaderText>
<LoaderText weight="semibold">Thinking…</LoaderText>
```

## With an icon

```astro
<LoaderText completedText="Summary ready">
<Sparkles slot="icon" />
Summarising the thread…
</LoaderText>
```

## States

-   **Loading** — the text shimmers (`apogee-shimmer`, 1.6 s linear).
-   **Completed** — the shimmer stops, the loading text fades out and `completedText` fades in (`--duration-medium`).
-   **Reduced motion** — no shimmer; the loading text is the faded neutral.

## Examples

An assistant reply that finishes. Flip `data-completed` when the work is done:

```astro
<div class="flex items-center gap-3">
<LoaderText completedText="Summary ready"><Sparkles slot="icon" /> Generating a summary…</LoaderText>
<Button size="small" variant="outline" color="neutral" onclick="this.previousElementSibling.dataset.completed = 'true'">Finish</Button>
</div>
```

## Accessibility

-   The root is `aria-live="polite"`, so a screen reader hears the done label when it appears.
-   Keep the loading text a real sentence (“Generating a summary…”), not just dots; it is what gets read.

## Tokens

| Token | Used for |
| --- | --- |
| `--foreground-neutral-faded` / `--foreground-neutral` | Shimmer gradient stops |
| `--duration-medium` / `--ease-standard` | Crossfade |

## Do / Don’t

-   **Do** use it for streaming or long-running states where a spinner says too little.
-   **Don’t** leave it shimmering without an end: pair it with `completed` or remove it when the work fails.

## Content

-   Loading text: a present-tense verb and an ellipsis (“Generating a summary…”).
-   `completedText`: past tense or a result (“Summary ready”), two or three words.

## Related

[

SpinnerA spinning loading indicator. Zero JS.

](https://apogee.avaui.dev/docs/spinner)[

SkeletonA pulsing placeholder shown in place of content while it loads. Zero JS.

](https://apogee.avaui.dev/docs/skeleton)[

ProgressA determinate or indeterminate progress bar.

](https://apogee.avaui.dev/docs/progress)