Activity Indicator

ActivityIndicator signals that something is loading. It uses a pure CSS animation so it works in any rendering context — no JS state, RSC-safe. The animation respects prefers-reduced-motion.

Installation

pnpm add @infinitibit_gmbh/ui @infinitibit_gmbh/theme-default

Usage

import '@infinitibit_gmbh/theme-default/theme.css';
import '@infinitibit_gmbh/ui/styles.css';

import { ActivityIndicator } from '@infinitibit_gmbh/ui';

export function Example() {
  return <ActivityIndicator />;
}

Sizes

Four sizes map to the Figma spec.

Size	Diameter
sm	24px
md	32px (default)
lg	40px
xl	54px

With label

Pass a label prop to display text below the spinner.

API

Prop	Type	Default	Description
size	'sm' | 'md' | 'lg' | 'xl'	'md'	Spinner diameter
label	string	—	Visible text below spinner; also becomes the accessible name
aria-label	string	'Loading'	Accessible name when no visible label; ignored when label set

All other <span> props are forwarded.

Accessibility

• role="status" announces updates to assistive technology without interrupting the user.
• When no label is provided, aria-label defaults to "Loading" so screen readers always have an accessible name.
• When label is provided, aria-label is omitted — the visible text is the accessible name.
• The CSS animation pauses automatically under prefers-reduced-motion: reduce.