Spinner

旋转的加载图标：每 800 ms 转一圈（等待类循环动画时长的一半），颜色与尺寸跟随旁边的文字。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/spinner

示例

单独使用、置于文字旁、置于按钮内

Finding a driver

spinner-basic.tsx

import { Button } from "@/components/zero/button";import { Spinner } from "@/components/zero/spinner";export default function SpinnerBasic() {  return (    <div className="flex flex-wrap items-center gap-6">      <Spinner className="size-6 text-zero-accent" />      <span className="flex items-center gap-2 font-medium font-zero-text text-zero-sm text-zero-text-2">        <Spinner aria-label="Finding a driver" />        Finding a driver      </span>      <Button disabled>        <Spinner aria-hidden />        Taking the job      </Button>    </div>  );}

行为

读屏软件会将其读作「Loading」；可传入 aria-label 说明正在加载的内容；若旁边的文字已有说明，则传入 aria-hidden。系统开启「减少动态效果」时，图标保持静止。

属性

Spinner

属性	类型	默认值	说明
className	string	—	用 size-* 设置尺寸，用 text-* 设置颜色。