Spinner

分类：

other

日期:

2022-1-24

标签：

chakra

Spinners provide a visual cue that an action is either processing, awaiting a course of change or a result.

View source View theme source @chakra-ui/spinner

Import#

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

Usage#

<Spinner />

Spinner with Color#

<Spinner color="red.500" />

Spinner with different size#

<Stack direction="row" spacing={4}>
  <Spinner size="xs" />
  <Spinner size="sm" />
  <Spinner size="md" />
  <Spinner size="lg" />
  <Spinner size="xl" />
</Stack>

Spinner with empty area color#

<Spinner
  thickness="4px"
  speed="0.65s"
  emptyColor="gray.200"
  color="blue.500"
  size="xl"
/>

Props#

`colorScheme`

Color Schemes Spinner

(string & {})

`emptyColor`

The color of the empty area in the spinner

string

"transparent"

`label`

For accessibility, it is important to add a fallback loading text. This text will be visible to screen readers.

string

"Loading..."

`size`

"xs" | "sm" | "md" | "lg" | "xl"

"md"

`speed`

The speed of the spinner. @example ```jsx <Spinner speed="0.2s"/> ```

string

"0.45s"

`thickness`

The thickness of the spinner @example ```jsx <Spinner thickness="4px"/> ```

string

"2px"

`variant`

Variants Spinner

string