# ProgressBar

```ts
import { ProgressBar } from 'cx/widgets';
```

The `ProgressBar` accepts values between `0` and `1` to indicate the state of progress.

```tsx
import { createModel } from "cx/data";
import { ProgressBar, Slider } from "cx/widgets";
import { LabelsTopLayout, LabelsTopLayoutCell, format } from "cx/ui";

interface PageModel {
  progress: number;
}

const m = createModel<PageModel>();

export default (
  <LabelsTopLayout>
    <Slider
      value={m.progress}
      minValue={0}
      maxValue={1}
      step={0.01}
      label="Progress:"
    />
    <LabelsTopLayoutCell style="vertical-align: middle">
      <ProgressBar
        value={m.progress}
        text={format(m.progress, "p;0")}
        style="height: 20px"
      />
    </LabelsTopLayoutCell>
  </LabelsTopLayout>
);

```

## Configuration

| Property | Type | Description |
| -------- | ---- | ----------- |
| `value` | `number` | Progress value between `0` and `1`. Default is `0`. |
| `text` | `string` | Annotation text displayed on the progress bar. |
| `disabled` | `boolean` | Set to `true` to make the progress bar appear disabled. |
| `baseClass` | `string` | Base CSS class. Default is `progressbar`. |
| `className` | `string` | Additional CSS class to apply. |
| `style` | `string \| object` | Additional styles to apply. |