LoaderText

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

Last updated

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.

Generating a summary…
Generating a summary…Done
Show code
<LoaderText>Generating a summary…</LoaderText>
<LoaderText completed completedText="Done">Generating a summary…</LoaderText>

Add

npx @ava-ui/apogee add loader-text

No dependencies.

Usage

---
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

Thinking…Thinking…Thinking…
Thinking…Thinking…Thinking…
Show code
<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

Summarising the thread…

Summary ready
Show code
<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:

Generating a summary…Summary ready
Show code
<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.
SkeletonA pulsing placeholder shown in place of content while it loads. Zero JS.
ProgressA determinate or indeterminate progress bar.