The KendoReact ProgressBar is the perfect component for displaying any form of progress in a React application. This can include a process like loading data or waiting for components to be loaded, or stepping through multiple steps and showing how much has been completed and what remains.
See React ProgressBar Overview demo
By default, the KendoReact ProgressBar starts from 0 and goes to a max value of 100. This may not be applicable for all scenarios, which is why the KendoReact ProgressBar exposes both min and max values to help define the range, as well as the ability to set the value of the React ProgressBar.
See React ProgressBar Value and Ranges demo
For scenarios that require the KendoReact ProgressBar to be disabled, a state where users cannot interact with the component, this can be done by setting a single configuration option.
See React ProgressBar Disabling demo
The React ProgressBar supports being rendered in both horizonal and vertical orientations.
See React ProgressBar Orientation demo
By default, the KendoReact ProgressBar fills itself from left to right. For scenarios that require the Progress to go from right-to-left, this can be done by setting the reverse property to true, reversing the direction of the KendoReact ProgressBar.
See React ProgressBar Direction demo
Labels representing the current value of the KendoReact ProgressBar can be rendered within the component at the start, center or end of the progress area. Additionally, these labels can include additional text and formatting options by defining the label property.
See React ProgressBar Label demo
By default, the KendoReact ProgressBar will show an animation as the value of the component changes. To disable this animation, or customize the behavior of the animation, one can work with the available configuration options to tweak the React ProgressBar to fit any requirements.
See React ProgressBar Animation demo
Aspects of the KendoReact ProgressBar like height and width, or more advanced scenarios like defining styles based on the current value of the component, can be completely customized to make the KendoReact ProgressBar adhere to styling requirements.
See React ProgressBar Appearance demo
The KendoReact ProgressBar supports globalization by being rendered in a Right-to-Left mode.
See React ProgressBar Globalization demo
See KendoReact in action and check out how much it can do out-of-the-box.
Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.
Try KendoReact with dedicated technical support.