Progress

Stable

Determinate and indeterminate progress indicator component.

Installation

npm install @xaui/native

Import

import { Progress } from '@xaui/native/progress'

Basic Usage

Minimal example showing the component with its default configuration.

import { Progress } from '@xaui/native/progress'

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

Linear Progress

Default linear progress bar with fractional values.

import { Progress } from '@xaui/native/progress'
import { Column } from '@xaui/native/view'

export function LinearProgressExample() {
  return (
    <Column gap={10}>
      <Progress value={0.2} />
      <Progress value={0.55} />
      <Progress value={0.9} />
    </Column>
  )
}

Circular Progress

Use circular variant for compact progress indicators.

import { Progress } from '@xaui/native/progress'
import { Row } from '@xaui/native/view'

export function CircularProgressExample() {
  return (
    <Row spacing={12} crossAxisAlignment="center">
      <Progress variant="circular" value={0.25} />
      <Progress variant="circular" value={0.6} />
      <Progress variant="circular" value={1} />
    </Row>
  )
}

Theme Colors and Size

Apply semantic colors and adjust thickness/diameter.

import { Progress } from '@xaui/native/progress'
import { Column, Row } from '@xaui/native/view'

export function ThemedProgressExample() {
  return (
    <Column gap={12}>
      <Progress value={0.45} themeColor="primary" size={6} />
      <Progress value={0.7} themeColor="success" size={8} />
      <Row spacing={10}>
        <Progress variant="circular" value={0.4} themeColor="secondary" size={28} />
        <Progress variant="circular" value={0.75} themeColor="warning" size={44} />
      </Row>
    </Column>
  )
}

Custom Colors and Static Mode

Override colors manually and disable animation.

import { Progress } from '@xaui/native/progress'
import { Column } from '@xaui/native/view'

export function CustomProgressExample() {
  return (
    <Column gap={10}>
      <Progress
        value={0.66}
        color="#2563eb"
        backgroundColor="#dbeafe"
        borderRadius={999}
      />
      <Progress
        variant="circular"
        value={0.35}
        color="#9333ea"
        backgroundColor="#f3e8ff"
        disableAnimation
      />
    </Column>
  )
}