ProgressBarProps

Represents the props of the KendoReact ProgressBar component.

Name	Type	Default	Description
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. jsx <ProgressBar animation={{ duration: 500 }} />
ariaLabel?	string		Provides an accessible label for the component. Example: jsx <ProgressBar ariaLabel="Loading progress" />
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' }} />
label?	React.ComponentType<LabelProps>		Provides a custom label component for the ProgressBar (see example). jsx const CustomLabel = (props) => <span>{props.value}%</span>; <ProgressBar label={CustomLabel} />
labelPlacement?	"center" | "end" | "start"		Specifies the position of the progress status label. Defaults to end (see example). jsx <ProgressBar labelPlacement="center" />
labelVisible?	boolean		Determines whether the progress status label is visible. Defaults to true. jsx <ProgressBar labelVisible={false} />
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} />