ActivityIndicator

Stable

Indeterminate loading indicator for pending operations.

Installation

npm install @xaui/native

Import

import { ActivityIndicator } from '@xaui/native/indicator'

Basic Usage

Minimal example showing the component with its default configuration.

import { ActivityIndicator } from '@xaui/native/indicator'

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

Variants

Use circular or linear indicators.

import { ActivityIndicator } from '@xaui/native/indicator'
import { Column } from '@xaui/native/view'

export function VariantsExample() {
  return (
    <Column gap={12}>
      <ActivityIndicator variant="circular" />
      <ActivityIndicator variant="linear" />
    </Column>
  )
}

Theme Colors

Apply semantic theme colors.

import { ActivityIndicator } from '@xaui/native/indicator'
import { Row } from '@xaui/native/view'

export function ThemeColorsExample() {
  return (
    <Row spacing={12} crossAxisAlignment="center">
      <ActivityIndicator themeColor="primary" />
      <ActivityIndicator themeColor="secondary" />
      <ActivityIndicator themeColor="success" />
      <ActivityIndicator themeColor="danger" />
    </Row>
  )
}

Sizes

Adjust indicator size per context.

import { ActivityIndicator } from '@xaui/native/indicator'
import { Row } from '@xaui/native/view'

export function SizesExample() {
  return (
    <Row spacing={12} crossAxisAlignment="center">
      <ActivityIndicator variant="circular" size={20} />
      <ActivityIndicator variant="circular" size={32} />
      <ActivityIndicator variant="circular" size={48} />
    </Row>
  )
}

Track and Custom Colors

Show track and override both foreground/background colors.

import { ActivityIndicator } from '@xaui/native/indicator'
import { Column } from '@xaui/native/view'

export function TrackAndColorExample() {
  return (
    <Column gap={12}>
      <ActivityIndicator
        variant="linear"
        size={6}
        showTrack
        color="#7c3aed"
        backgroundColor="#ede9fe"
        borderRadius={999}
      />
      <ActivityIndicator
        variant="circular"
        size={42}
        showTrack
        color="#0ea5e9"
        backgroundColor="#e0f2fe"
      />
    </Column>
  )
}

Disable Animation

Render a static indicator state (useful for previews/tests).

import { ActivityIndicator } from '@xaui/native/indicator'
import { Row } from '@xaui/native/view'

export function DisableAnimationExample() {
  return (
    <Row spacing={12}>
      <ActivityIndicator disableAnimation />
      <ActivityIndicator variant="linear" disableAnimation showTrack />
    </Row>
  )
}