New to KendoReactLearn about KendoReact Free.

ChunkProgressBarProps

Represents the props of the KendoReact ChunkProgressBar component.

NameTypeDefaultDescription

ariaLabel?

string

Provides an accessible label for the component.

Example:

jsx
<ProgressBar ariaLabel="Loading progress" />

chunkCount?

number

Defines the number of chunks into which the ChunkProgressBar is divided. Defaults to 5. Each chunk visually represents a portion of the progress bar.

jsx
<ChunkProgressBar chunkCount={10} />

className?

string

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

Example:

jsx
<ProgressBar className="custom-progress-bar" />

dir?

string

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

Example:

jsx
<ProgressBar dir="rtl" />

disabled?

boolean

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

Example:

jsx
<ProgressBar disabled={true} />

emptyClassName?

string

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

Example:

jsx
<ProgressBar emptyClassName="custom-empty-class" />

emptyStyle?

React.CSSProperties

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

Example:

jsx
<ProgressBar emptyStyle={{ backgroundColor: 'lightgray' }} />

max?

number

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

Example:

jsx
<ProgressBar max={100} />

min?

number

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

Example:

jsx
<ProgressBar min={0} />

orientation?

"horizontal" | "vertical"

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

Example:

jsx
<ProgressBar orientation="vertical" />

progressClassName?

string

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

Example:

jsx
<ProgressBar progressClassName="custom-progress-class" />

progressStyle?

React.CSSProperties

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

Example:

jsx
<ProgressBar progressStyle={{ backgroundColor: 'green' }} />

reverse?

boolean

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

Example:

jsx
<ProgressBar reverse={true} />

style?

React.CSSProperties

Applies additional CSS styles to the progress bar.

Example:

jsx
<ProgressBar style={{ backgroundColor: 'red' }} />

tabIndex?

number

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

Example:

jsx
<ProgressBar tabIndex={0} />

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).

Example:

jsx
<ProgressBar value={50} />
Not finding the help you need?
Contact Support