Progress

Displays an indicator showing the completion progress of a task.

Examples

Variant

Size

Circular Size

State

Striped

State

Indeterminate

State

Show Label

13%

import { Progress } from 'kalki-design'

<Progress>Click me</Progress>

npx kalki-design add progress

import { Progress } from 'kalki-design'

export default function Example() {
  return <Progress />
}

Name	Type	Default	Description
Name`value`	Type`number`	Default`—`	DescriptionThe progress value.
Name`max`	Type`number`	Default`100`	DescriptionThe maximum progress value.
Name`variant`	Type`'default' \| 'success' \| 'warning' \| 'error'`	Default`'default'`	DescriptionVisual style of the progress bar.
Name`size`	Type`'sm' \| 'md' \| 'lg'`	Default`'md'`	DescriptionHeight of the linear progress track.
Name`indeterminate`	Type`boolean`	Default`false`	DescriptionWhether the progress is indeterminate.
Name`showLabel`	Type`boolean`	Default`false`	DescriptionWhether to display the percentage label.
Name`striped`	Type`boolean`	Default`false`	DescriptionAdds zebra stripes to the linear progress bar.