Say what the wait is.

One spinner cannot tell a customer whether we are listening, searching or solving. Nine named states, each with its own motion, the same names on web and native. Pick a state, size and speed, then copy the code.

The nine states

Use the name that matches the work. If none fits, the state is working.

Rules

• Pair the orb with words. The orb carries the state, the sentence carries the detail: "Reading the supplier invoice".
• One orb per waiting region. A screen full of orbs is a screen full of spinners.
• Do not switch state faster than roughly a second. Flicker reads as a bug.
• It stops on prefers-reduced-motion, when the tab is hidden, and when it scrolls out of view.
• Colour comes from color, defaulting to --primary, so both themes work with no branch.

Install

<link rel="stylesheet" href="https://design.bhd.om/orb.css">
<script src="https://design.bhd.om/orb.js"></script>

<span data-bhd-orb="searching" data-bhd-orb-size="64"></span>

// or
const orb = BHDOrb.create(el, { state: 'listening', size: 48, speed: 1 });
orb.setState('solving');