Progress

A progress bar indicating completion status. Built on Ark UI.

Import


import { Progress } from '@grannyshot/ui'


<Progress value={40} />


<Progress size="sm" value={30} />  {/* 4px */}
<Progress size="md" value={50} />  {/* 8px */}
<Progress size="lg" value={70} />  {/* 12px */}


<Progress value={60} label="Uploading..." />


<Progress value={75} showValue />


<Progress value={45} label="Downloading" showValue />


<Progress value={3} min={0} max={10} />

Prop	Type	Default	Description
`value`	`number`	`0`	Current progress value
`min`	`number`	`0`	Minimum value
`max`	`number`	`100`	Maximum value
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Bar height (sm=4px, md=8px, lg=12px)
`label`	`string`	—	Label text displayed above the bar
`showValue`	`boolean`	`false`	Show percentage value
`className`	`string`	—	Additional CSS classes