Component reference

Progress

Native progress: a known amount, or an indeterminate bar when value is omitted.

Preview

Known and unknown amounts

A labeled native progress bar for a known amount, and an indeterminate bar when the length is unknown. The spinner remains the wait that takes less room.

packages/meowtail/stories/progress.stories.tsxline 15tsx

render: () => {
  const value = signal(2);
  return (
    <Measure width="narrow">
      <Stack>
        <Stack gap="compact">
          <span>Reviewed 2 of 5 files</span>
          <Progress label="Reviewed 2 of 5 files" value={value} max={5} />
        </Stack>
        <ActionRow>
          <Button
            variant="outline"
            size="small"
            onClick={() => {
              value.value = Math.max(0, value.value - 1);
            }}
          >
            Less
          </Button>
          <Button
            variant="outline"
            size="small"
            onClick={() => {
              value.value = Math.min(5, value.value + 1);
            }}
          >
            More
          </Button>
        </ActionRow>
        <Stack gap="compact">
          <span>Connecting to the workspace</span>
          <Progress label="Connecting to the workspace" />
        </Stack>
      </Stack>
    </Measure>
  );
}

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { Progress } from "meowtail";

<Progress label="Connecting to the workspace" />

API reference

Props

Prop	Type	Default
`label`RequiredAccessible name. Spinner remains the wait with no known amount.	`MaybeSignal<string>`	–
`value`Omit for an indeterminate bar. Finite values are handed to the native progress element.	`MaybeSignal<number>`	–
`max`	`MaybeSignal<number>`	`1`

Also takes className, children and the attributes and events of its root element.

DOM parts

rootbar

Registry

The component is registered as progress in the meowtail component registry.