v0.6.59

LoadingLogo

Five loading animations built from the Wander logo strokes

Animate the Wander mark while content loads. For a compact inline indicator, use LoadingDots.

Installation

pnpm add @wandercom/design-system-web

Usage

5 lines
import { LoadingLogo } from '@wandercom/design-system-web/ui/loading-logo';

export function Example() {
  return <LoadingLogo />;
}

Variants

The default variant is trace. The outer ring stays stationary in every variant. Scan illuminates it along with the inner strokes, keeping a faint, complete outline visible. The other variants keep the ring solid. Trace and Draw also keep the diagonal solid and stationary; Scan and the Signal variants illuminate it.

VariantMotion
TraceMoves long arcs along the ellipses
DrawReveals and retracts the ellipses along their fixed paths
ScanSweeps narrow light bands across the entire logo
SignalMoves short, bright trails over faint inner strokes
Long signalMoves longer, bright trails over faint inner strokes

Use paused to pause and resume the animation.

Loading example...

Customization

The default size is 24px (size-6), and the logo inherits the surrounding text color. Set a different size and color with className, and adjust the cycle duration in seconds with duration.

12 lines
import { LoadingLogo } from '@wandercom/design-system-web/ui/loading-logo';

export function Example() {
  return (
    <LoadingLogo
      className="size-12 text-secondary"
      duration={3}
      label="Finding your stay…"
      variant="trace"
    />
  );
}

Props

The component accepts standard <span> props, except children.

variant?:

'trace' | 'draw' | 'scan' | 'signal' | 'long-signal'
Loading animation to display. Defaults to "trace".

label?:

string
Assistive label announced to screen readers. Defaults to "Loading…".

duration?:

number
Duration of one animation cycle, in seconds. Defaults to 2.4. Nonfinite or nonpositive values use the default.

paused?:

boolean
Pauses the animation at its current position. Defaults to false.

className?:

string
Additional CSS classes for size, color, and layout.

Accessibility

The indicator uses role="status" and an overridable label to announce the loading state. Its SVG is hidden from screen readers. If nearby text already announces the same state, pass aria-hidden="true" to avoid a duplicate announcement.

All variants respect prefers-reduced-motion: reduce and display the complete, static logo. The loading label remains available to assistive technology.

LoadingLogo