Progress

Progress Bar

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

Preview

Usage

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.