Progress Indicator

Visually communicates waiting states in the application.

Last updated 9/18/2025

Size

Circular offers Small, Medium, Large. Use Medium or Large for Linear.

Small (Circular)

Medium (Circular)

Large (Circular)

Medium (Linear)

Large (Linear)

import { ProgressIndicator } from "@serendie/ui";
import { css } from "styled-system/css";
import { HBox, VBox } from "src/components/LayoutUtils";

export function SizeSample() {
  return (
    <>
      <HBox>
        <VBox>
          <ProgressIndicator
            type="circular"
            size="small"
            value={30}
            max={100}
          />
          <p>Small (Circular)</p>
        </VBox>
        <VBox>
          <ProgressIndicator
            type="circular"
            size="medium"
            value={60}
            max={100}
          />
          <p>Medium (Circular)</p>
        </VBox>
        <VBox>
          <ProgressIndicator
            type="circular"
            size="large"
            value={90}
            max={100}
          />
          <p>Large (Circular)</p>
        </VBox>
      </HBox>
      <HBox mt="sd.system.dimension.spacing.extraLarge">
        <VBox>
          <ProgressIndicator
            type="linear"
            size="medium"
            value={60}
            max={100}
            className={css({ width: "200px" })}
          />
          <p>Medium (Linear)</p>
        </VBox>
        <VBox>
          <ProgressIndicator
            type="linear"
            size="large"
            value={90}
            max={100}
            className={css({ width: "200px" })}
          />
          <p>Large (Linear)</p>
        </VBox>
      </HBox>
    </>
  );
}

Determinate

Use when progress can be quantified. Linear grows horizontally; Circular uses an arc. Progress is value / max.

Linear (60%)

Circular (60%)

import { ProgressIndicator } from "@serendie/ui";
import { HBox, VBox } from "src/components/LayoutUtils";

export function DeterminateTypeSample() {
  return (
    <HBox w="100%">
      <VBox>
        <ProgressIndicator
          type="linear"
          size="large"
          value={60}
          max={100}
          style={{ width: 280 }}
        />
        <p>Linear (60%)</p>
      </VBox>
      <VBox>
        <ProgressIndicator type="circular" value={60} max={100} size="large" />
        <p>Circular (60%)</p>
      </VBox>
    </HBox>
  );
}

Indeterminate

Use when duration is unknown. Linear shows sliding animation; Circular shows a rotating arc.

Linear

Circular

import { ProgressIndicatorIndeterminate } from "@serendie/ui";
import { HBox, VBox } from "src/components/LayoutUtils";

export function IndeterminateTypeSample() {
  return (
    <HBox>
      <VBox>
        <ProgressIndicatorIndeterminate
          type="linear"
          size="large"
          style={{ width: 280 }}
        />
        <p>Linear</p>
      </VBox>
      <VBox>
        <ProgressIndicatorIndeterminate type="circular" size="large" />
        <p>Circular</p>
      </VBox>
    </HBox>
  );
}

Indeterminate colors

Choose between Primary and Subtle for indeterminate. Pick based on importance and background contrast.

Circular / Primary

Circular / Subtle

import { ProgressIndicatorIndeterminate } from "@serendie/ui";
import { HBox, VBox } from "src/components/LayoutUtils";

export function IndeterminateColorSample() {
  return (
    <>
      <HBox>
        <VBox>
          <ProgressIndicatorIndeterminate
            type="circular"
            color="primary"
            size="large"
          />
          <p>Circular / Primary</p>
        </VBox>
        <VBox>
          <ProgressIndicatorIndeterminate
            type="circular"
            color="subtle"
            size="large"
          />
          <p>Circular / Subtle</p>
        </VBox>
      </HBox>
    </>
  );
}