Progress

The Progress component provides a flexible UI element for displaying progress indicators.

Usage

import { Progress } from '@harnessio/ui/components'

//...

return (
  <Progress value={0.75} state="processing" />
)

Variants

The Progress component supports the variant prop to indicate the type of progress being displayed. It accepts default and indeterminate values. This defines whether the progress is measurable or ongoing without a known completion percentage.

States

The Progress component supports the state prop to reflect the current status of the operation. It accepts completed, paused, failed, processing, and default values. This controls the visual feedback based on the progress state.

Sizes

The Progress component supports the size prop to adjust the height of the progress bar. It accepts sm, md, and lg values. This allows customization of the component’s visual size to fit different UI contexts.

API Reference

Prop	Required	Default	Type
variant	false	'default'	'default' | 'indeterminate'
value	false		number
state	false	'default'	'default' | 'processing' | 'completed' | 'paused' | 'failed'
size	false	'md'	'sm' | 'md' | 'lg'
label	false		string
description	false		string
subtitle	false		string
hidePercentage	false	false	boolean
hideIcon	false	false	boolean
id	false		string
className	false		string