Getting Started with KendoReact ProgressBar

The ProgressBar displays and tracks the progress of a task.

It supports different label formats, horizontal and vertical orientation, and also different directions.

The ProgressBar 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 ProgressBar in action.

const App = () => {
    const { value, start, stop, reset } = useInterval(0, 50);

    return (
        <div>
            <div className="text-center">
                <button className="k-button k-primary" onClick={start}>start</button>
                <button className="k-button" onClick={stop}>stop</button>
                <button className="k-button" onClick={reset}>reset</button>
            </div>
            <br />
            <div className="text-center">
                <ProgressBar value={value} />
            </div>
        </div>
    );
};

function useInterval(initialValue, ms) {
    const [value, setValue] = React.useState(initialValue);
    const intervalRef = React.useRef(null);
    let val = 0;

    const start = React.useCallback(() => {
        if (intervalRef.current !== null) {
            return;
        }

        intervalRef.current = setInterval(() => {
            if (val < 100) {
                setValue(v => v + 1);
                val = val + 1;
            }
        }, ms);
    }, []);
    const stop = React.useCallback(() => {
        if (intervalRef.current === null) {
            return;
        }
        clearInterval(intervalRef.current);
        intervalRef.current = null;
    }, []);
    const reset = React.useCallback(() => {
        setValue(0);
        val = 0;
    }, []);
    return { value, start, stop, reset };
}

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

Functionality and Features