Park UI Logo
GitHub
Components
Spinner

Spinner

An animated loading spinner.

Loading...
import { Spinner, type SpinnerProps } from '~/components/ui/spinner'

export const Demo = (props: SpinnerProps) => {
  return <Spinner {...props} />
}

Usage

import { Spinner } from '~/components/ui/spinner'

Examples

Customizing Color

Use the colorPalette prop to change the spinner's color.

Loading...
<Spinner colorPalette="red" />

Customizing Track Color

Use the borderColor prop to change the spinner's track color.

Loading...
<Spinner borderLeftColor="bg.emphasized" borderBottomColor="bg.emphasized" />

Customizing Thickness

Use the borderWidth prop to change the spinner's thickness.

Loading...
<Spinner borderWidth="4px" />

Installation

npx @park-ui/cli components add spinner