Progress Indicators

Material Design progress indicators and Cupertino (iOS-style) activity indicator.

Usage

Linear Progress IndicatorIndeterminate

Determinate (50%)

Rounded Corners

Circular Progress Indicator

Indeterminate

Determinate (75%)

Cupertino Activity Indicator

Default

Large Blue

<template>
  <Column :gap="30">
    <!-- Linear Progress -->
    <Column :gap="10">
      <Text data="Linear Progress Indicator" :style="{ fontSize: 18, fontWeight: 'bold' }" />
      <Text data="Indeterminate" :style="{ fontSize: 14, color: '#666' }" />
      <LinearProgressIndicator />

      <Text data="Determinate (50%)" :style="{ fontSize: 14, color: '#666' }" />
      <LinearProgressIndicator
        :value="0.5"
        :color="Colors.green"
        :background-color="Colors.green100"
      />

      <Text data="Rounded Corners" :style="{ fontSize: 14, color: '#666' }" />
      <LinearProgressIndicator
        :value="0.7"
        :borderRadius="10"
        :minHeight="10"
        :color="Colors.orange"
      />
    </Column>

    <!-- Circular Progress -->
    <Column :gap="10">
      <Text data="Circular Progress Indicator" :style="{ fontSize: 18, fontWeight: 'bold' }" />
      <Row :gap="20" alignment="center">
        <Column alignment="center" :gap="5">
          <CircularProgressIndicator />
          <Text data="Indeterminate" :style="{ fontSize: 12 }" />
        </Column>
        <Column alignment="center" :gap="5">
          <CircularProgressIndicator :value="0.75" :color="Colors.purple" />
          <Text data="Determinate (75%)" :style="{ fontSize: 12 }" />
        </Column>
      </Row>
    </Column>

    <!-- Cupertino Activity Indicator -->
    <Column :gap="10">
      <Text data="Cupertino Activity Indicator" :style="{ fontSize: 18, fontWeight: 'bold' }" />
      <Row :gap="20" alignment="center">
        <Column alignment="center" :gap="5">
          <CupertinoActivityIndicator />
          <Text data="Default" :style="{ fontSize: 12 }" />
        </Column>
        <Column alignment="center" :gap="5">
          <CupertinoActivityIndicator :radius="15" :color="CupertinoColors.activeBlue" />
          <Text data="Large Blue" :style="{ fontSize: 12 }" />
        </Column>
      </Row>
    </Column>
  </Column>
</template>

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

Components

LinearProgressIndicator

A material design linear progress indicator.

Props:

Prop	Type	Default	Description
value	number | null	null	The value of the progress (0.0 to 1.0). If null, it shows an indeterminate animation.
color	Color | string	Colors.blue	The progress color.
backgroundColor	Color | string	Colors.blue[200]	The background track color.
minHeight	number	4	The height of the bar.
borderRadius	number | BorderRadius	undefined	The border radius of the indicator.

CircularProgressIndicator

A material design circular progress indicator.

Props:

Prop	Type	Default	Description
value	number | null	null	The value of the progress (0.0 to 1.0). If null, it shows an indeterminate animation.
color	Color | string	Colors.blue	The progress color.
backgroundColor	Color | string	undefined	The background track color.
strokeWidth	number	4	The width of the circle line.
size	number	36	The diameter of the circle.

CupertinoActivityIndicator

An iOS-style activity indicator.

Props:

Prop	Type	Default	Description
animating	boolean	true	Whether to run the animation.
color	Color | string	CupertinoColors.systemGrey	The color of the spinner blades.
radius	number	10	The radius of the spinner.