Spinner

The spinner icon, turning: half a waiting loop a turn, in the colour and size of the text beside it.

Install

terminal

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

Examples

Alone, beside text, in a button

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>  );}

Behaviour

It announces itself as "Loading"; pass aria-label to say what is loading, or aria-hidden when the text beside it already says so. Under reduced motion it holds still.

Props

Spinner

Prop	Type	Default	Description
className	string	—	Size it with size-, colour it with text-.