Spinner

Loading spinner component for indicating loading states.

Spinner

Spinner is a data display component for indicating loading states with an animated spinner.

Import

import { Spinner } from 'radix-native-ui';

Usage

import { Spinner } from 'radix-native-ui';

<Spinner />

Props

Examples

Basic Spinner

<Spinner />

Sizes

<Flex direction="row" gap={3} align="center">
  <Spinner size={1} />
  <Spinner size={2} />
  <Spinner size={3} />
</Flex>

Colors

<Flex direction="row" gap={3} align="center">
  <Spinner color="blue" />
  <Spinner color="green" />
  <Spinner color="red" />
  <Spinner color="yellow" />
  <Spinner color="purple" />
</Flex>

With Loading Text

<Flex direction="row" gap={2} align="center">
  <Spinner size={1} />
  <Text>Loading...</Text>
</Flex>

Full Page Loading

<Flex
  flex={1}
  justify="center"
  align="center"
>
  <Spinner size={3} />
</Flex>

Button Loading State

<Button disabled>
  <Flex direction="row" gap={2} align="center">
    <Spinner size={1} />
    <Text>Saving...</Text>
  </Flex>
</Button>

Conditional Loading

function DataLoader() {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then(result => {
      setData(result);
      setLoading(false);
    });
  }, []);

  if (loading) {
    return (
      <Flex flex={1} justify="center" align="center">
        <Spinner size={3} />
      </Flex>
    );
  }

  return <DataDisplay data={data} />;
}

Card Loading State

<Card>
  {loading ? (
    <Flex direction="column" gap={3} align="center" py={4}>
      <Spinner size={2} />
      <Text size={2} color="gray">Loading content...</Text>
    </Flex>
  ) : (
    <CardContent />
  )}
</Card>

Related

• Progress - Progress indicator
• Button - Button component