Spinner 加载组件 #

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

function Example() {
  return <Spinner />
}

<Spinner size="xs" />
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
<Spinner size="xl" />

<Spinner color="red.500" />
<Spinner color="blue.500" />
<Spinner color="green.500" />
<Spinner color="orange.500" />

<Spinner speed="0.5s" />
<Spinner speed="1s" />
<Spinner speed="2s" />

<Spinner thickness="2px" />
<Spinner thickness="4px" />
<Spinner thickness="6px" />

<Spinner emptyColor="gray.200" color="blue.500" />

function CenteredSpinner() {
  return (
    <Flex justify="center" align="center" h="200px">
      <Spinner size="xl" />
    </Flex>
  )
}

function LoadingWithText() {
  return (
    <HStack spacing={4}>
      <Spinner />
      <Text color="gray.500">加载中...</Text>
    </HStack>
  )
}

function FullPageLoader() {
  return (
    <Flex
      position="fixed"
      top={0}
      left={0}
      right={0}
      bottom={0}
      justify="center"
      align="center"
      bg="white"
      zIndex="overlay"
    >
      <VStack spacing={4}>
        <Spinner size="xl" color="blue.500" />
        <Text color="gray.500">正在加载...</Text>
      </VStack>
    </Flex>
  )
}

function LoadingButton({ isLoading, children, ...props }) {
  return (
    <Button {...props} isDisabled={isLoading}>
      {isLoading ? <Spinner size="sm" mr={2} /> : null}
      {children}
    </Button>
  )
}