LogoSpinner – Once UI

LogoSpinner moves the four tiles of the Once UI mark. Use it where a product's own loader belongs, such as an assistant working on a reply. Spinner stays the neutral one for buttons and fields. See the web LogoSpinner for the browser version.

LogoSpinner

import { LogoSpinner, Row } from "@once-ui-system/native";

export function Loaders() {
return (
  <Row gap="16" vertical="center">
    <LogoSpinner />
    <LogoSpinner variant="wave" color="accent" size="l" />
    <LogoSpinner color="neutral" size="xl" speed={2.4} />
  </Row>
);
}

Variants

twist, the default, parts the tiles, turns the mark a quarter and clicks them back together. wave lifts one tile at a time, clockwise from the top. speed sets the seconds per cycle, 1.6 by default.

With reduce motion turned on in the device settings, the tiles stop moving and fade in turn instead, so the loader still shows that something is happening.

Differences from the web

React Native has no inherited text color, so color="inherit" uses the strongest neutral text color, like neutral.
It is announced as a progress bar named by ariaLabel.

API reference

Prop	Type	Default	Description
size	"xs" \| "s" \| "m" \| "l" \| "xl"	"m"	The same footprint as Spinner, from the 16 step to the 40 step.
variant	"twist" \| "wave"	"twist"	How the tiles move.
color	"brand" \| "accent" \| "neutral" \| "inherit"	"brand"	The color of the mark.
speed	number	1.6	Seconds per cycle.
ariaLabel	string	"Loading"	Read out by screen readers.
...FlexProps	FlexProps		Spacing, position and the other Flex props.