ProgressIndicator

ProgressIndicator is a native loading primitive that displays an indeterminate progress spinner. It maps to UIActivityIndicatorView on iOS and ProgressBar on Android, ensuring consistent native visual patterns for loading states.

Basic Usage

The component is at its simplest as a small, animated spinner.

import { ProgressIndicator, View } from "@zynthjs/components";

function LoadingView() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <ProgressIndicator size="small" />
    </View>
  );
}

Resizing and Coloring

You can choose between small and large sizes and apply a custom hex color to brand the spinner.

<ProgressIndicator 
  size="large" 
  color="#3498db" // Modern blue
/>

Controlling Animation

If the loading process is paused or the spinner needs to be displayed in a static state, use the animating prop to toggle the rotation.

<ProgressIndicator 
  size="small" 
  animating={isDataLoading()} 
/>

Props