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)
a11y-hint - Accessibility hint (optional)

Examples#

Centered loading screen#

Copied!

<native:column class="w-full h-[200] items-center justify-center">
    <native:activity-indicator size="lg" />
    <native:text class="text-base text-theme-on-surface-variant mt-4">Loading...</native:text>
</native:column>

<native:column class="w-full h-[200] items-center justify-center">
    <native:activity-indicator size="lg" />
    <native:text class="text-base text-theme-on-surface-variant mt-4">Loading...</native:text>
</native:column>

On a real loading screen, use <native:column fill center> at the page root instead — the fixed h-[200] here just gives the example a bounded area to center in.

Inline loading#

Copied!

<native:row class="gap-2 items-center">
    <native:activity-indicator size="sm" />
    <native:text class="text-sm text-theme-on-surface-variant">Refreshing</native:text>
</native:row>

<native:row class="gap-2 items-center">
    <native:activity-indicator size="sm" />
    <native:text class="text-sm text-theme-on-surface-variant">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
a11yHint(string $value) - Accessibility hint