Logo Loader

Source: apps/docs/src/components/demos/LogoLoaderDemo.tsx Figma: MVP · node 495:136

The Logo Loader is the AI thinking state. A pulse of light travels left→right across the circuit nodes of the Prosper cloud mark while a highlight sweeps across the label — signalling that the assistant is working without resorting to a generic spinner. It’s intended for the admin AI chatbot, in place of a message bubble while a response streams in.

Preview

thinking…

Anatomy

Part	Description
Cloud mark	The Prosper logo in brand blue (`#2B00FF`).
Circuit nodes	Four points along the cloud. A lit pulse steps across them left→right, then loops.
Label	`thinking…` rendered with a gray→white→gray gradient that sweeps in time with the pulse.

The Figma source ships five variants — these are the animation keyframes. Rather than swap five images, the component draws one inline SVG and drives both the pulse and the text shimmer with CSS, so the loop is smooth and the element stays reusable.

Props

Prop	Type	Default	Description
`size`	`number`	`24`	Logo height in px. The 14px label and pill scale relative to it.
`label`	`string`	`"thinking…"`	Text shown in the pill.

import { LogoLoader } from "@/components/demos/LogoLoaderDemo";

<LogoLoader />
<LogoLoader size={28} />
<LogoLoader label="searching the role…" />

Motion

Property	Value
Cycle	`1.6s`, `linear`, `infinite`
Pulse	Each node brightens (`opacity 0.3 → 1`) with a soft halo, staggered by a quarter-cycle so one light travels the circuit.
Shimmer	A white band sweeps across the label via an animated `background-position` on a `background-clip: text` gradient.