Search results

Animation in React ProgressBar component

24 Jun 2022 / 1 minute 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.

Source
Preview
index.jsx
index.tsx
Copied to clipboard
import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar';
import * as React from "react";
import * as ReactDOM from "react-dom";
ReactDOM.render(<ProgressBarComponent id="linear" type='Linear' trackThickness={24} progressThickness={24} value={60} animation={{
    enable: true,
    duration: 2000,
    delay: 0,
}}>
    </ProgressBarComponent>, document.getElementById("container"));
Copied to clipboard
import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar';
import * as React from "react";
import * as ReactDOM from "react-dom";

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