Activity Indicator

Overview#

A circular spinner indicating background activity. Always indeterminate — for determinate progress use <native:progress-bar>. Renders as a SwiftUI ProgressView on iOS and Material3 CircularProgressIndicator on Android.

Copied!

<native:activity-indicator />

<native:activity-indicator />

Props#

All shared layout and style attributes are supported, plus:

size - "sm", "md" (default), or "lg" (optional, string). Legacy ints 1=large, 2=small are also accepted
color - Spinner color as hex string (optional). Leave unset to use theme.primary
a11y-label - Accessibility label (optional)

Examples#

Centered loading screen#

Copied!

<native:column fill center>
    <native:activity-indicator size="lg" />
    <native:text class="text-base text-slate-400 mt-4">Loading...</native:text>
</native:column>

<native:column fill center>
    <native:activity-indicator size="lg" />
    <native:text class="text-base text-slate-400 mt-4">Loading...</native:text>
</native:column>

Inline loading#

Copied!

<native:row :gap="8" :align-items="1">
    <native:activity-indicator size="sm" />
    <native:text class="text-sm text-slate-500">Refreshing</native:text>
</native:row>

<native:row :gap="8" :align-items="1">
    <native:activity-indicator size="sm" />
    <native:text class="text-sm text-slate-500">Refreshing</native:text>
</native:row>

Override the tint#

Copied!

<native:activity-indicator color="#7C3AED" />

<native:activity-indicator color="#7C3AED" />

Element#

Copied!

use Nativephp\NativeUi\Elements\ActivityIndicator;
 
ActivityIndicator::make()
    ->size('lg')
    ->color('#7C3AED')
    ->a11yLabel('Loading messages');

use Nativephp\NativeUi\Elements\ActivityIndicator;

ActivityIndicator::make()
    ->size('lg')
    ->color('#7C3AED')
    ->a11yLabel('Loading messages');

make() - Create a new indicator
size(string|int $size) - "sm" | "md" | "lg". Legacy: 1=large, 2=small
color(string $hex) - Override the theme tint
a11yLabel(string $value) - Accessibility label