A progress-bar which has divided section based on React.js
npm:
npm install --save react-divided-progress-bar
import ProgressBar from "react-divided-progress-bar";
import { useState } from "react";
export default function App() {
const percentage = 90;
const [number, setNumber] = useState(percentage);
return (
<ProgressBar
value={number}
sections={5}
maxValue={100}
color="primary"
animated
stripped
colorChange
/>
);
}
value
means your current value; the default is 0
.
maxValue
means your maximum value is 100%; the default is '100'.
increaseDuration
means microseconds to reach your value. The default is '1000'.
divide
means using divde funcion. If you set it to 'false', the dividing section will disappear. The default is 'true'.
sections
means how many sections you want. The default is '2'. If you set divide
to false, this will not be applied.
color
is referenced by "bootstrap" and "react MUI". so there are serveral color tokens. the dafault is primary
primary
secondary
info
success
warning
danger
black
bgColor
means using backgroun-color. default is true
animated
and stripped
's default is 'false'.
colorChange
means color will be gradually changed based on progress rate. The default is 'false'.