Components

ActivityIndicator

Show that an asynchronous task is in progress.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Default

Loading preview…

Code
'use client';
import { ActivityIndicator } from '@swiftuijs/ui';
import { VStack } from '@swiftuijs/ui';
import { HStack } from '@swiftuijs/ui';
export default function Example() {
    return ((<VStack spacing={24}>
      <HStack spacing={16}>
        <ActivityIndicator size="small"/>
        <ActivityIndicator size="medium"/>
        <ActivityIndicator size="large"/>
      </HStack>
      <ActivityIndicator color="#FF3B30"/>
      <ActivityIndicator color="#34C759"/>
    </VStack>));
}

Usage and limitations

  • Sizes are small, medium, or large; color overrides the spinner color.
  • The spinner is visual and non-interactive. Provide nearby task text and an accessible status label.
  • Place it where the awaited content will appear; use ProgressView when you know the amount completed.

API reference

PropTypeRequiredDescription
size'small' | 'medium' | 'large'NoThe size of the activity indicator. Default: 'medium'
colorstringNoThe color of the activity indicator. Uses accent color by default.

Inherits additional props from IBaseComponent.

Edit this page on GitHubReport an issue

Components

Find a component, try its example, and check its requirements.

Alert

Present a short message that requires attention or a decision.