## Import

```jsx
import { ProgressBar } from "@cfa/react-core";
```

## Live Editor

```jsx
<ProgressBar value={40} />
```

## Guidelines

### When to use

- ProgressBar is a read-only bar that shows an operation is in progress, with a percentage when it is known.

### Do

- Use determinate mode when completion percentage is known, such as file uploads, form submission, or data saving.
- Use indeterminate mode when duration is unknown but the operation is expected to take longer than about 2 seconds.
- Show a percentage label for determinate progress. Round to whole numbers unless higher precision is required.
- For determinate progress, keep `aria-valuenow` in sync with the visible percentage. For indeterminate progress, omit `aria-valuenow`.

### Avoid

- Using ProgressBar for instant operations under about 1 second.
- Using ProgressBar for a linear multi-step flow where people navigate steps. Use Stepper.
- Using indeterminate mode when a simple spinner is enough. Use LoadingIndicator.

## Examples

### Fill color

The fill uses the info semantic color by default and switches to success green when the value reaches `maxValue`. Override the in-progress fill with the `--progress-bar-fill-color` CSS variable.

```jsx
<>
  <ProgressBar value={40} label="In progress" />
  <ProgressBar value={100} label="Complete" />
  <ProgressBar value={40} label="Custom fill" style={{ "--progress-bar-fill-color": "#6b4eff" }} />
</>
```

### Compact

The `compact` prop can be used to reduce the height of the Progress Bar.

```jsx
<ProgressBar compact label="Compact" value={40} />
```

### Format Options

Values are formatted as a percentage by default, but this can be modified by using the `formatOptions` prop to specify a different format. `formatOptions` is compatible with the option parameter of  and is applied based on the current locale.

The `valueLabel` prop is available to customize the label when changing the scale of the Progress Bar with `minValue` and `maxValue`.

```jsx
<ProgressBar
  formatOptions={{
    currency: "USD",
    style: "currency",
  }}
  label="Revenue Goal"
  maxValue={100000}
  minValue={0}
  value={67890.12}
/>
```

## Props

### ProgressBar

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| compact | `boolean` | `false` | Smaller height bar |
| label | `string` | - | Label of the ProgressBar |
| aria-describedby | `string` | - | Identifies the element (or elements) that describes the object. |
| aria-details | `string` | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| aria-label | `string` | - | Defines a string value that labels the current element. |
| aria-labelledby | `string` | - | Identifies the element (or elements) that labels the current element. |
| children | `ChildrenOrFunction<ProgressBarRenderProps>` | - | The children of the component. A function may be provided to alter the children based on component state. |
| className | `ClassNameOrFunction<ProgressBarRenderProps>` | `'react-aria-ProgressBar'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| dir | `string` | - | - |
| formatOptions | `NumberFormatOptions` | `{ style: 'percent' }` | The display format of the value label. |
| hidden | `boolean` | - | - |
| id | `string` | - | The element's unique identifier. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Global\_attributes/id). |
| inert | `boolean` | - | - |
| lang | `string` | - | - |
| maxValue | `number` | `100` | The largest value allowed for the input. |
| minValue | `number` | `0` | The smallest value allowed for the input. |
| onAnimationEnd | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onContextMenu | `MouseEventHandler<HTMLDivElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onDoubleClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onGotPointerCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onLostPointerCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onPointerCancel | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onScroll | `UIEventHandler<HTMLDivElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLDivElement>` | - | - |
| onTouchCancel | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLDivElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLDivElement>` | - | - |
| render | `DOMRenderFunction<"div", ProgressBarRenderProps>` | - | Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Requirements:&#xA;&#xA;- You must render the expected element type (e.g. if \`\<button>\` is expected, you cannot render an \`\<a>\`).&#xA;- Only a single root DOM element can be rendered (no fragments).&#xA;- You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| slot | `string \ | null` | - | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit \`null\` value indicates that the local props completely override all props received from a parent. |
| style | `StyleOrFunction<ProgressBarRenderProps>` | - | The inline \[style]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| suppressHydrationWarning | `boolean` | - | A React-only flag that suppresses the warning React normally logs when an element's server-rendered content doesn't match the client render during hydration. See \[React docs]\(https\://react.dev/reference/react-dom/client/hydrateRoot#suppressing-unavoidable-hydration-mismatch-errors). |
| translate | `"no" \ | "yes"` | - | - |
| value | `number` | `0` | The current value (controlled). |
| valueLabel | `ReactNode` | - | The content to display as the value's label (e.g. 1 of 4). |