@ chakra-ui/ spinner (英语)

Spinners提供了一个视觉提示,即一个动作正在处理中,等待一个 变化或结果.

安装

yarn add @chakra-ui/spinner

# or

npm i @chakra-ui/spinner

导入组件

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

使用量

<Spinner />

大小不同的自旋器

改变旋转器的大小 size 道具 (英语).

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

有颜色的自旋器

通过传出旋转器移动部分的背景颜色 color 道具 (英语).

<Spinner color="red.500" />

以空区域颜色旋转

通过传出旋转器来改变旋转器的背景颜色 emptyColor 道具 (英语).

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

速度不同的旋转器

改变旋转器的动画速度区域 speed 道具 (英语). 单位 值与 animation-duration CSS 财产 属性.

<Spinner color="red.500" emptyColor="gray.200" speed="0.65s" />