Animation

To enable the ProgressBar animation, set the animation option to true.

By default, animation is set to false.

import { Checkbox } from '@progress/kendo-react-inputs';
const App = () => {
    const [animation, setAnimation] = React.useState(true);
    const [animatedValue, setAnimatedValue] = React.useState(0);

    const handleAnimation = (e) => {
       setAnimation(!e.target.checked);
    };

    const changeProgress = () => {
        animatedValue === 100 ? setAnimatedValue(0) : setAnimatedValue(100);
    };

    return (
        <div className="container">
            <div className="row mb-4">
                <div className="col-sm">
                    <Checkbox id="animation" onClick={handleAnimation} label="Disable the animation" labelPlacement="before" />
                </div>
            </div>
            <div className="row mb-4">
                <div className="col-sm">
                    <ProgressBar
                        value={animatedValue}
                        animation={animation}
                    />
                </div>
                <div className="col-sm">
                    <button className="k-button" onClick={changeProgress}>{animatedValue === 0 ? 'Start progress' : 'Reset progress'}</button>
                </div>
            </div>
            <style>
                {`.row { align-items: center; }`}
            </style>
        </div>
    );
};

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

By default, the animation duration is 400ms. To provide a different duration, set the duration option of ProgressBarAnimation to the desired value.

const App = () => {
    const [animatedValue, setAnimatedValue] = React.useState(0);
    const duration = 1000;

    const changeProgress = () => {
        animatedValue === 100 ? setAnimatedValue(0) : setAnimatedValue(100);
    };

    return (
         <div className="container">
            <div className="row mb-4">
                <div className="col-sm">
                    Duration: {duration}ms
                </div>
            </div>
            <div className="row mb-4">
                <div className="col-sm">
                    <ProgressBar
                        value={animatedValue}
                        animation={{duration: duration}}
                    />
                </div>
                <div className="col-sm">
                    <button className="k-button" onClick={changeProgress}>{animatedValue === 0 ? 'Start progress' : 'Reset progress'}</button>
                </div>
            </div>
            <style>
                {`.row { align-items: center; }`}
            </style>
        </div>
    );
};

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