加载指示器

import { Spinner } from "@chakra-ui/react"

const Demo = () => {
  return <Spinner size="sm" />
}

import { HStack, Spinner } from "@chakra-ui/react"

const Demo = () => {
  return (
    <HStack gap="5">
      <Spinner size="xs" />
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
      <Spinner size="xl" />
    </HStack>
  )
}

import { Spinner, Stack } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"

const Demo = () => {
  return (
    <Stack gap="2" align="flex-start">
      {colorPalettes.map((colorPalette) => (
        <Stack
          align="center"
          key={colorPalette}
          direction="row"
          gap="10"
          px="4"
        >
          <Spinner
            size="sm"
            color="colorPalette.600"
            colorPalette={colorPalette}
          />
          <Spinner
            size="md"
            color="colorPalette.600"
            colorPalette={colorPalette}
          />
          <Spinner
            size="lg"
            color="colorPalette.600"
            colorPalette={colorPalette}
          />
        </Stack>
      ))}
    </Stack>
  )
}

import { Spinner } from "@chakra-ui/react"

const Demo = () => {
  return <Spinner color="teal.500" size="lg" />
}

import { Spinner } from "@chakra-ui/react"

export const SpinnerWithTrackColor = () => (
  <Spinner
    color="red.500"
    css={{ "--spinner-track-color": "colors.gray.200" }}
  />
)

import { Spinner } from "@chakra-ui/react"

export const SpinnerWithCustomSpeed = () => (
  <Spinner color="blue.500" animationDuration="0.8s" />
)

import { Spinner } from "@chakra-ui/react"

export const SpinnerWithCustomThickness = () => (
  <Spinner color="blue.500" borderWidth="4px" />
)

import { Spinner, Text, VStack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <VStack colorPalette="teal">
      <Spinner color="colorPalette.600" />
      <Text color="colorPalette.600">Loading...</Text>
    </VStack>
  )
}

import { Box, Center, Heading, Spinner, Text } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Box position="relative" aria-busy="true" userSelect="none">
      <Heading>Some heading text</Heading>
      <Text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac
        consectetur libero, id ultricies urna. Sed ac consectetur libero, id
        fames ac ante ipsum primis in faucibus.
      </Text>
      <Box pos="absolute" inset="0" bg="bg/80">
        <Center h="full">
          <Spinner color="teal.500" />
        </Center>
      </Box>
    </Box>
  )
}