Animation in React Progress bar component

30 Jan 20233 minutes to read

Progress Bar support to animate the progress by using animation property. Enable the animation by setting enable property and also you can control the speed by using duration property.

index.jsx

import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    return (<ProgressBarComponent id="linear" type='Linear' trackThickness={24} progressThickness={24} value={60} animation={{
            enable: true,
            duration: 2000,
            delay: 0
        }}>
    </ProgressBarComponent>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("container"));

index.tsx

import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
  return(
    <ProgressBarComponent id="linear"
                        type='Linear'
                        trackThickness={24}
                        progressThickness={24}
                        value={60}
                        animation={{
                            enable: true,
                            duration: 2000,
                            delay: 0
                        }}>
    </ProgressBarComponent>
  )
};
export default App;
ReactDOM.render(<App />, document.getElementById("container"));