AI Components & Features

New to KendoReact? Start a free 30-day trial

ProgressBarProps

Interface

Represents the props of the KendoReact ProgressBar component.

Definition

Package:@progress/kendo-react-progressbars

Properties

animation?

boolean | ProgressBarAnimation

Configures the animation settings of the ProgressBar. Defaults to false. If set to a boolean, it enables or disables the default animation. If set to a ProgressBarAnimation object, it allows customization of the slide animation duration in milliseconds.

Default:

false

ariaLabel?

string

Provides an accessible label for the component.

className?

string

Adds a list of CSS classes to the progress bar element.

dir?

string

Sets the dir HTML attribute to switch between LTR and RTL directions.

disabled?

boolean

Determines whether the progress bar is in a disabled state. See examples (here) and (here).

emptyClassName?

string

Adds additional CSS classes to the inner element representing the empty portion of the progress bar. See examples (here) and (here).

emptyStyle?

CSSProperties

Specifies the styles applied to the inner element representing the empty portion of the progress bar. See examples (here) and (here).

label?

ComponentType<LabelProps>

Provides a custom label component for the ProgressBar (see example).

labelPlacement?

"start" | "center" | "end"

Specifies the position of the progress status label. Defaults to end (see example).

Default:

"end"

labelVisible?

boolean

Determines whether the progress status label is visible. Defaults to true.

Default:

true

max?

number

Specifies the maximum value of the progress bar. Defaults to 100.

Default:

100

min?

number

Specifies the minimum value of the progress bar. Defaults to 0.

Default:

0

orientation?

"horizontal" | "vertical"

Specifies the orientation of the progress bar. Can be horizontal or vertical. Defaults to horizontal. See examples (here) and (here).

Default:

"horizontal"

progressClassName?

string

Adds additional CSS classes to the inner element representing the full portion of the progress bar. See examples (here) and (here).

progressStyle?

CSSProperties

Specifies the styles applied to the inner element representing the full portion of the progress bar. See examples (here) and (here).

reverse?

boolean

If set to true, reverses the direction of the progress bar. Defaults to false. See examples (here) and (here).

Default:

false

style?

CSSProperties

Applies additional CSS styles to the progress bar.

tabIndex?

number

Sets the tabIndex attribute of the progress bar for keyboard navigation.

value?

null | number

Sets the current value of the progress bar. Must be between the min and max values. Defaults to 0. Set to null to enable the indeterminate state of the progress bar. See examples (here) and (here).

Default:

0