Progress

Progress indicator component for showing completion status.

Progress

Progress is a data display component for showing completion status of tasks or operations.

Import

import { Progress } from 'radix-native-ui';

Usage

import { Progress } from 'radix-native-ui';

<Progress value={60} />

Props

Examples

Basic Progress

<Progress value={50} />

Sizes

<Progress size={1} value={60} />
<Progress size={2} value={60} />
<Progress size={3} value={60} />

Colors

<Progress color="blue" value={60} />
<Progress color="green" value={60} />
<Progress color="red" value={60} />
<Progress color="amber" value={60} />
<Progress color="purple" value={60} />
<Progress color="indigo" value={60} />

Variants

<Progress variant="solid" value={60} />
<Progress variant="surface" value={60} />
<Progress variant="soft" value={60} />
<Progress variant="outline" value={60} />

With Label

<Flex direction="column" gap={2}>
  <Flex direction="row" justify="between">
    <Text>Uploading...</Text>
    <Text>60%</Text>
  </Flex>
  <Progress value={60} />
</Flex>

Multiple Progress Bars

<Flex direction="column" gap={3}>
  <Flex direction="column" gap={1}>
    <Text size={2}>Storage Used</Text>
    <Progress value={75} color="blue" />
    <Text size={1} color="gray">7.5 GB of 10 GB</Text>
  </Flex>

  <Flex direction="column" gap={1}>
    <Text size={2}>Bandwidth</Text>
    <Progress value={45} color="green" />
    <Text size={1} color="gray">4.5 GB of 10 GB</Text>
  </Flex>

  <Flex direction="column" gap={1}>
    <Text size={2}>API Calls</Text>
    <Progress value={90} color="red" />
    <Text size={1} color="gray">9,000 of 10,000</Text>
  </Flex>
</Flex>

Indeterminate

<Progress value={null} />

Dynamic Progress

function UploadProgress() {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress(prev => {
        if (prev >= 100) {
          clearInterval(interval);
          return 100;
        }
        return prev + 10;
      });
    }, 500);

    return () => clearInterval(interval);
  }, []);

  return (
    <Flex direction="column" gap={2}>
      <Text>Uploading: {progress}%</Text>
      <Progress value={progress} color={progress === 100 ? 'green' : 'blue'} />
    </Flex>
  );
}

Related

• Spinner - Loading spinner
• Slider - Slider input