> For the complete documentation index, see [llms.txt](https://docs.usegravity.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usegravity.app/gravity-web/components/progress.md).

# Progress

### Progress Bar

The `Progress` component displays a bar indicator to represent progress as a percentage.

### Preview

<div align="left"><figure><img src="/files/2LhlsJFWBnzoqkMpMnV0" alt="Gravity progress indicator component" width="375"><figcaption></figcaption></figure></div>

### Usage

```javascript
import { Progress } from 'components/lib';

function Example({ ...props }){
  return (
    <div>
      <Progress value={ 50 } />
    </div>
  );
}
```

### Props

| Prop      | Description      | Required | Value            |
| --------- | ---------------- | -------- | ---------------- |
| className | custom styling   | optional | SCSS or Tailwind |
| value     | percentage value | required | integer          |

### Notes

* The `Progress` component uses `ProgressPrimitive` from `@radix-ui/react-progress` for the progress functionality.
* The `value` prop specifies the percentage value to be displayed by the progress bar.
* The `className` prop allows for custom styling to be applied.
* The progress indicator's transform is calculated based on the `value` prop to visually represent the progress.
* For more details, refer to the [Shadcn Progress documentation](https://ui.shadcn.com/docs/components/progress).