Display@knitui/components

Loader

Loader is a multi-type loading indicator (oval | dots | bars). Accent color comes from the active theme ramp via the theme prop. Motion honours the user's prefers-reduced-motion preference and animates identically on web and native.

WebiOSAndroid3 own props8 examples

Stories Source Tests Open in Storybook

import { Loader } from "@knitui/components";

Playground

Loading playground…

typeLoader rendition — spinning ring, pulsing dots, or rising bars.

sizeSize key (xxs–xxl) or an explicit pixel number.

aria-labelAccessible label read by screen readers. Defaults to "Loading".

themeActive theme accent — recolors the loader via the palette ramp.

Playground

<Loader
  type="oval"
  size="md"
/>

Examples

Types

All three loader types side by side at the default size.

Loading example…

TypesSource Storybook

Sizes

The seven size keys, from xxs to xxl, using the default oval type.

Loading example…

SizesSource Storybook

Shadows

The inherited shadow elevation prop, from xs to xl.

Loading example…

ShadowsSource Storybook

Custom Size

An explicit pixel size — useful when the preset keys don't match a specific layout.

Loading example…

Custom SizeSource Storybook

Themed

The palette ramp follows the active theme — same component, different accent.

Loading example…

ThemedSource Storybook

Custom Label

Custom accessibility label — overrides the default "Loading" for screen readers.

Loading example…

Custom LabelSource Storybook

Matrix

Full type × size matrix for visual regression.

Loading example…

MatrixSource Storybook

Props

Prop	Type	Default	Description
`aria-label`	`string \| undefined`	`"Loading"`	Accessible label read by screen readers. Defaults to "Loading".
`disabled` system	`boolean \| undefined`	—
`role`	`"progressbar" \| undefined`	`"progressbar"`	Semantic progress role.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`size` system	`number \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined` xxs · xs · sm · md · lg · xl · xxl	`"md"`	Size key (xxs–xxl) or an explicit pixel number.
`theme` system	`ThemeName \| null \| undefined` unset · blue · red · green · yellow · pink · gray	—	Active theme accent — recolors the loader via the palette ramp.
`type`	`LoaderType \| undefined` oval · dots · bars	`"oval"`	Loader rendition — spinning ring, pulsing dots, or rising bars.

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 496 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.