All components
Spinner
A current-color loading indicator sized from inherit up to xl.
123456789import { Spinner } from "#components/ui/ark-ui/spinner.tsx";
export function Example() { return ( {/* the size prop resolves through the StyleX recipe; the spinner inherits currentColor from its surroundings */} <Spinner size="md" aria-label="Loading" /> );}Sizes
xs
sm
md
lg
xl
Install
1npx stylexblocks add spinnerSource
components/ui/ark-ui/spinner.tsx
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364import * as stylex from "@stylexjs/stylex";import { createComponent } from "#lib/ark-ui/create-component.tsx";import { defineRecipe } from "#lib/recipe-props.ts";import { durations } from '@stylexblocks/ui/tokens/durations.stylex.ts'import { radii } from '@stylexblocks/ui/tokens/radii.stylex.ts'import { sizes } from '@stylexblocks/ui/tokens/sizes.stylex.ts'
const spinnerStyles = stylex.create({ base: { display: 'inline-block', borderColor: 'currentColor', borderStyle: 'solid', borderWidth: '2px', borderRadius: radii.full, width: 'var(--spinner-size)', height: 'var(--spinner-size)', animationName: 'spin', animationTimingFunction: 'linear', animationIterationCount: 'infinite', animationDuration: durations.slowest, '--spinner-track-color': 'transparent', borderBottomColor: 'var(--spinner-track-color)', borderInlineStartColor: 'var(--spinner-track-color)', },})
const spinnerSizes = stylex.create({ inherit: { '--spinner-size': '1em', }, xs: { '--spinner-size': sizes._3, }, sm: { '--spinner-size': sizes._4, }, md: { '--spinner-size': sizes._5, }, lg: { '--spinner-size': sizes._8, }, xl: { '--spinner-size': sizes._10, },})
export type SpinnerSize = keyof typeof spinnerSizes
/** * Spinner — recipe and component colocated in one file. The size prop * resolves mechanically from the axis map; it spins in `currentColor`. * Composition via `asChild`. */const spinnerRecipe = defineRecipe({ styles: spinnerStyles, axes: { size: spinnerSizes }, defaultVariants: { size: "md" },});
export const Spinner = createComponent("span", spinnerRecipe, "Spinner");
export type SpinnerProps = React.ComponentProps<typeof Spinner>;