# Progress

### Progress Bar

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

### Preview

<div align="left"><figure><img src="https://3357577683-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LlnrBGdA8s50Vnplq1j%2Fuploads%2FfAZOAH8dpf9qyh1JNA1P%2Fprogress.png?alt=media&#x26;token=8a507b1b-8071-4982-b489-b28d1dd6e121" 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).