Very easy to use React progress bars
npm install react-progress-components> Simple to use React progress bars
 
You can check some examples of the application of the available progress components on the link below:
https://showcase-react-progress-components.netlify.app
``bash`
npm install react-progress-components
or
`bash`
yarn add react-progress-components
There is a total of 2 types of progress bars available:
- Circle;
- Line.
#### The possible values for each prop are the following:
- type: String - 'circle'and 'line'. Default: 'circle'
- trackColor: String with the color. Default: '#ddd'
- progressColor: String with the color. Default: 'blue'
- size: Number. Circle and Line progress bars have a minimum size. Circle minimum size = 50px, and Line minimum size = 200px
- textFont: String with the font. Default: 'Arial'
- textColor: String with the color. Only valid for type Line. You can use 'transparent' if you do not want the text to appear. Default: 'white'. When using progress bar type Line, if its size is less than 400px, the text color will be by default transparent.
- shape: String with the format, either 'round' or 'square'. Only valid for type Line. Default: 'round'
- progress: Number ranging 0-100. Default: 5
Default values will be used in case the respective prop is not provided to the component.
`jsx
import React from 'react';
import { ProgressBarComponent } from 'react-progress-components';
const Example = () => {
const [progress, setProgress] = useState(5);
useEffect(() => {
setTimeout(() => {
setProgress(progress + 5);
}, 250);
});
return(
);
};
`
`jsx
import React from 'react';
import { ProgressBarComponent } from 'react-progress-components';
const Example = () => {
const [progress, setProgress] = useState(5);
useEffect(() => {
useEffect(() => {
setTimeout(() => {
setProgress(progress + 5);
}, 250);
});
});
return(
);
};
``
MIT © kazimkazam