> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ProgressBar

> Show measured progress or a visual countdown with a horizontal bar.

export const StoryEmbed = ({storyId, title, height = 240}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

`ProgressBar` displays a value from 0 to 100 and exposes progressbar semantics. Give it an `ariaLabel` that identifies the operation, and show a text status when users need the numeric value.

<StoryEmbed storyId="ui-feedback-progressbar-progressbar--default" title="ProgressBar example" />

## Usage

```tsx theme={null}
import { ProgressBar } from 'twenty-ui/primitives/feedback';
import { Text } from 'twenty-ui/primitives/typography';

type ImportProgressProps = { percentage: number };

export const ImportProgress = ({ percentage }: ImportProgressProps) => (
  <>
    <Text>Importing records: {percentage}%</Text>
    <ProgressBar
      value={percentage}
      ariaLabel="Importing records"
      withBorderRadius
    />
  </>
);
```

## State ownership

`value` is required and controlled by the application. There is no `defaultValue` mode. The component does not start a request or advance numeric progress by itself. Use [Loader](/ui/primitives/feedback/loader) or [CircularProgressBar](/ui/primitives/feedback/circular-progress-bar) when progress is unknown.

## Countdown

```tsx theme={null}
import { useState } from 'react';
import { ProgressBar } from 'twenty-ui/primitives/feedback';
import { Button } from 'twenty-ui/primitives/input';
import { Text } from 'twenty-ui/primitives/typography';

export const PreviewCountdown = () => {
  const [isPaused, setIsPaused] = useState(false);
  const [isComplete, setIsComplete] = useState(false);

  return (
    <>
      <Text role="status">
        {isComplete ? 'Preview ended' : 'Preview available'}
      </Text>
      {!isComplete && (
        <>
          <div aria-hidden="true">
            <ProgressBar
              value={100}
              ariaLabel="Preview countdown"
              countdownDurationInMs={10000}
              isCountdownPaused={isPaused}
              onCountdownComplete={() => setIsComplete(true)}
            />
          </div>
          <Button onClick={() => setIsPaused((paused) => !paused)}>
            {isPaused ? 'Resume countdown' : 'Pause countdown'}
          </Button>
        </>
      )}
    </>
  );
};
```

`countdownDurationInMs` animates the bar from full to empty. Pausing preserves the current animation position. Completion calls `onCountdownComplete`; mount a fresh instance to restart the animation.

The animation does not change `value` or its accessible numeric value. This example hides the decorative bar from assistive technology and announces completion separately. If remaining time matters, track and display it in application state. Use application timing for deadlines, since the callback follows a visual animation.

## Appearance

`barColor` and `backgroundColor` accept CSS colors, including theme variables. `withBorderRadius` rounds the track and indicator. `className` styles the root; other native attributes are not forwarded.

## Props

<ParamField body="ariaLabel" type="string">
  Accessible name describing the operation being measured.
</ParamField>

<ParamField body="backgroundColor" type="string" default="none">
  CSS background color of the track.
</ParamField>

<ParamField body="barColor" type="string">
  CSS color of the filled bar. Defaults to the primary text color.
</ParamField>

<ParamField body="className" type="string">
  CSS class applied to the progress root.
</ParamField>

<ParamField body="countdownDurationInMs" type="number">
  Starts a visual animation from full to empty over this duration in milliseconds. Does not update `value`.
</ParamField>

<ParamField body="isCountdownPaused" type="boolean" default="false">
  Pauses the countdown animation without resetting its position.
</ParamField>

<ParamField body="onCountdownComplete" type="(() => void)">
  Called when the countdown animation ends.
</ParamField>

<ParamField body="value" type="number" required>
  Current progress from 0 to 100. Also supplies the accessible value during a countdown.
</ParamField>

<ParamField body="withBorderRadius" type="boolean" default="false">
  Rounds the track and indicator corners.
</ParamField>