Customization in React Progress bar component
25 Mar 202319 minutes to read
Segments
We can divide a progress bar into multiple segments using a segmentCount to visualize the progress of multiple sequential tasks.
import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
return (<ProgressBarComponent id="circular" type='Circular' height='160px' segmentCount={8} value={100} animation={{
enable: true,
duration: 2000,
delay: 0
}}>
</ProgressBarComponent>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("container"));import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
return(<ProgressBarComponent id="circular"
type='Circular'
height='160px'
segmentCount={8}
value={100}
animation={{
enable: true,
duration: 2000,
delay: 0
}}>
</ProgressBarComponent>
)
};
export default App;
ReactDOM.render(<App />, document.getElementById("container"));Thickness
Customize the thickness of the track using trackThickness, progress using progressThickness and secondary progress using secondaryProgressThickness to render the progress bar with different appearances.
import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
return(<ProgressBarComponent id="circular"
type='Circular'
height='160px'
width='90%'
trackThickness={24}
progressThickness={24}
secondaryProgressThickness={20}
value={100}
animation={{
enable: true,
duration: 2000,
delay: 0
}}>
</ProgressBarComponent>
)
};
export default App;
ReactDOM.render(<App />, document.getElementById("container"));Radius
The radius of the progress bar can be customized using radius property and corner can be customized by cornerRadius property.
import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
return (<ProgressBarComponent id="circular" type='Circular' height='160px' width='90%' trackThickness={80} progressThickness={10} value={100} enableRtl={false} trackColor="#FFD939" radius="100%" progressColor="white" cornerRadius="Round" animation={{
enable: true,
duration: 2000,
delay: 0
}}>
</ProgressBarComponent>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("container"));import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
return(<ProgressBarComponent id="circular"
type='Circular'
height='160px'
width='90%'
trackThickness={80}
progressThickness={10}
value={100}
enableRtl={false}
trackColor="#FFD939"
radius="100%"
progressColor="white"
cornerRadius="Round"
animation={{
enable: true,
duration: 2000,
delay: 0
}}>
</ProgressBarComponent>
)
};
export default App;
ReactDOM.render(<App />, document.getElementById("container"));InnerRadius
The inner radius of the progress bar can be customized using innerRadius property.
import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
return (<ProgressBarComponent id="circular" type='Circular' height='160px' width='90%' trackThickness={80} progressThickness={10} value={100} enableRtl={false} trackColor="#FFD939" radius="100%" innerRadius='80%' progressColor="white" cornerRadius="Round" animation={{
enable: true,
duration: 2000,
delay: 0
}}>
</ProgressBarComponent>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("container"));import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
return(<ProgressBarComponent id="circular"
type='Circular'
height='160px'
width='90%'
trackThickness={80}
progressThickness={10}
value={100}
enableRtl={false}
trackColor="#FFD939"
radius="100%"
innerRadius='80%'
progressColor="white"
cornerRadius="Round"
animation={{
enable: true,
duration: 2000,
delay: 0
}}>
</ProgressBarComponent>
)
};
export default App;
ReactDOM.render(<App />, document.getElementById("container"));Progress color and track color
Customize the color of progress, secondary progress, and track by using the progressColor, secondaryProgressColor, and trackColor properties.
import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
return (<ProgressBarComponent id="circular" type='Circular' height='160px' width='90%' trackThickness={24} progressThickness={24} value={50} secondaryProgress={70} secondaryProgressColor='green' enableRtl={false} showProgressValue={true} trackColor="#F8C7D8" radius="100%" progressColor="#E3165B" cornerRadius="Round" animation={{
enable: true,
duration: 2000,
delay: 0
}}>
</ProgressBarComponent>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("container"));import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
return(
<ProgressBarComponent id="circular"
type='Circular'
height='160px'
width='90%'
trackThickness={24}
progressThickness={24}
secondaryProgressColor='green'
value={50}
enableRtl={false}
showProgressValue={true}
trackColor="#F8C7D8"
radius="100%"
progressColor="#E3165B"
cornerRadius="Round"
secondaryProgress={70}
animation={{
enable: true,
duration: 2000,
delay: 0
}}>
</ProgressBarComponent>
)
};
export default App;
ReactDOM.render(<App />, document.getElementById("container"));