This section explains the steps required to create the ProgressBar control using React and configure its properties.
Below is the list of minimum dependencies required to use the progress bar component.
|-- @syncfusion/ej2-react-progressbar
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-data
|-- @syncfusion/ej2-svg-base
You can use create-react-app
to setup the applications.
To install create-react-app
run the following command.
npm install -g create-react-app
React
sample use following commands.create-react-app quickstart --scripts-version=react-scripts-ts
cd quickstart
npm install
npm install @syncfusion/ej2-react-progressbar --save
Now, you can start adding Progress bar component in the application.
For getting started, add the Progress bar component in src/App.tsx
file using following code.
import {ProgressBarComponent} from '@syncfusion/ej2-react-progressbar';
import * as React from 'react';
class App extends React.Component {
render() {
return ( <ProgressBarComponent/>);
}
}
export default App;
Now, we might create a simple progress bar sample as shown below.
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' height='60' value={40} animation={{
enable: true,
duration: 2000,
delay: 0,
}}>
</ProgressBarComponent>, document.getElementById("container"));
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'
height='60'
value={40}
animation={{
enable: true,
duration: 2000,
delay: 0,
}}>
</ProgressBarComponent>,
document.getElementById("container") as HTMLElement
);
Now run the npm start
command in the console, it will run your application and open the browser window.
npm start