Spinner

Spinner is a loading indicator that inherits color from its parent element.

Open in Storybook

Import

import { Spinner } from "@tosui/react";

Basic usage

Preview

Code

<Spinner />

Sizes

Preview

Code

<HStack gap={4} align="center">
  <Spinner size="sm" />
  <Spinner size="md" />
  <Spinner size="lg" />
</HStack>

Colors

Spinner inherits color from its parent. Set the parent's color to change the spinner color.

Preview

Code

<HStack gap={4}>
  <Box color="primary"><Spinner /></Box>
  <Box color="accent"><Spinner /></Box>
  <Box color="success"><Spinner /></Box>
  <Box color="warning"><Spinner /></Box>
  <Box color="error"><Spinner /></Box>
</HStack>

Common patterns

Button loading state

Button has built-in loading support:

Preview

Code

<HStack gap={4}>
  <Button loading>Saving</Button>
  <Button loading variant="outline">Processing</Button>
</HStack>

Centered loading

Preview

Loading...

Code

<Box display="flex" alignItems="center" justifyContent="center" h="200px" bg="surface" rounded="md">
  <VStack gap={3}>
    <Spinner size="lg" />
    <Box color="foreground-muted" fontSize="sm">Loading...</Box>
  </VStack>
</Box>

Inline loading

Preview

Checking availability...

Code

<HStack gap={2} align="center">
  <Spinner size="sm" />
  <Box fontSize="sm">Checking availability...</Box>
</HStack>

Full-page loading

function PageLoader() {
  return (
    <Box
      position="fixed"
      inset={0}
      display="flex"
      alignItems="center"
      justifyContent="center"
      bg="background"
      zIndex="modal"
    >
      <VStack gap={4}>
        <Spinner size="lg" />
        <Text>Loading application...</Text>
      </VStack>
    </Box>
  );
}

Props reference

Prop	Type	Default	Description
size	"sm" | "md" | "lg"	"md"	Spinner size
as	ElementType	"span"	HTML element to render

Spinner also accepts Box style props.

Size dimensions

Size	Width/Height
sm	1em
md	1.5em
lg	2em

Accessibility

• Spinner uses role="status" with aria-label="Loading".
• Pass aria-hidden="true" when nearby text already communicates the loading state.

TypeScript

import { Spinner } from "@tosui/react";