Getting Started with KendoReact ChunkProgressBar

The ChunkProgressBar displays and tracks the progress of a task as a predefined number of chunks.

It supports horizontal and vertical orientation, and different directions.

The ChunkProgressBar component is part of KendoReact, a professionally built commercial UI library. To try out this component you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

Basic Usage

The following example demonstrates the ChunkProgressBar in action.

const App = () => {
    const [value, setValue] = React.useState(0);

    const handleIncrease = () => {
        if (value < 100) {
            setValue(value + 20);
        }
    }

    const handleDecrease = () => {
        if (value > 0) {
            setValue(value - 20);
        }
    }
    return (
        <div className="wrapper">
            <button disabled={value === 0} className="k-button k-secondary mr-3" onClick={handleDecrease}>
                <span className="k-icon k-i-rewind"></span>
            </button>
            <ChunkProgressBar value={value} />
            <button disabled={value === 100} className="k-button k-primary ml-3"  onClick={handleIncrease}>
                <span className="k-icon k-i-forward"></span>
            </button>
        </div>
    )
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Functionality and Features