CupertinoActivityIndicator

An iOS-style activity indicator that spins clockwise.

Usage

Default

Large

Colored

Not Animating

<template>
  <Column :gap="40">
    <Row :gap="40" cross-axis-alignment="center">
      <Column :gap="10" cross-axis-alignment="center">
        <CupertinoActivityIndicator />
        <Text>Default</Text>
      </Column>

      <Column :gap="10" cross-axis-alignment="center">
        <CupertinoActivityIndicator :radius="15" />
        <Text>Large</Text>
      </Column>

      <Column :gap="10" cross-axis-alignment="center">
        <CupertinoActivityIndicator color="#FF3B30" />
        <Text>Colored</Text>
      </Column>
    </Row>

    <Row :gap="40" cross-axis-alignment="center">
      <Column :gap="10" cross-axis-alignment="center">
        <CupertinoActivityIndicator :animating="false" />
        <Text>Not Animating</Text>
      </Column>
    </Row>
  </Column>
</template>

<script setup lang="ts">
import { Column, Row, Text, CupertinoActivityIndicator } from "fluekit";
</script>

API

Props

Name	Type	Default	Description
animating	boolean	true	Whether the indicator should animate.
color	string	'#999999'	The color of the tick marks.
radius	number	10	The radius of the spinner. Total size is 2x radius.