Visualize progress in different modes.
This is the default state. You can use it when the progress estimation is known.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ProgressBarComponent } from "@syncfusion/ej2-react-progressbar";
function App() {
return (<ProgressBarComponent id="linear" type="Linear" height="60" value={100} animation={{
enable: true,
duration: 2000,
delay: 0
}}>
</ProgressBarComponent>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("container"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { ProgressBarComponent } from "@syncfusion/ej2-react-progressbar";
function App() {
return(<ProgressBarComponent
id="linear"
type="Linear"
height="60"
value={100}
animation={{
enable: true,
duration: 2000,
delay: 0
}}>
</ProgressBarComponent>
)
};
export default App;
ReactDOM.render(<App />, document.getElementById("container"));By enabling the IsIndeterminate property, the state of the progress bar can be changed to indeterminate when the progress cannot be estimated or is not being calculated. It can be combined with determinate mode to know that the application is estimating progress before the actual progress starts.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ProgressBarComponent } from "@syncfusion/ej2-react-progressbar";
function App() {
return (<ProgressBarComponent id="linear" type="Linear" height="60" value={20} isIndeterminate={true} animation={{
enable: true,
duration: 2000,
delay: 0
}}>
</ProgressBarComponent>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("container"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { ProgressBarComponent } from "@syncfusion/ej2-react-progressbar";
function App() {
return(<ProgressBarComponent
id="linear"
type="Linear"
height="60"
value={20}
isIndeterminate={true}
animation={{
enable: true,
duration: 2000,
delay: 0
}}>
</ProgressBarComponent>
)
};
export default App;
ReactDOM.render(<App />, document.getElementById("container"));You can use a secondary progress indicator when the primary progress depends on the secondary progress. This will allow users to visualize both primary and secondary progress simultaneously.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ProgressBarComponent } from "@syncfusion/ej2-react-progressbar";
function App() {
return (<ProgressBarComponent id="linear" type="Linear" height="60" value={40} secondaryProgress={60} animation={{
enable: true,
duration: 2000,
delay: 0
}}>
</ProgressBarComponent>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("container"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { ProgressBarComponent } from "@syncfusion/ej2-react-progressbar";
function App() {
return(<ProgressBarComponent
id="linear"
type="Linear"
height="60"
value={40}
secondaryProgress={60}
animation={{
enable: true,
duration: 2000,
delay: 0
}}>
</ProgressBarComponent>
)
};
export default App;
ReactDOM.render(<App />, document.getElementById("container"));