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

Install

npm install react-progress-components

or

yarn add react-progress-components

Usage

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.

Examples

Circle

import React from 'react';

import { ProgressBarComponent } from 'react-progress-components';

const Example = () => {
  const [progress, setProgress] = useState(5);

  useEffect(() => {
    setTimeout(() => {
      setProgress(progress + 5);
    }, 250);
  });

  return(
    <ProgressBarComponent type={ 'circle' } trackColor={ '#ddd' } progressColor={ '#00FFD1' } textFont={ 'Arial' } size={ 200 } progress={ progress } />
  );
};

Line

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(
    <ProgressBarComponent type={ 'line' } trackColor={ '#ddd' } shape={ 'round' } progressColor={ 'red' } textFont={ 'Arial' } textColor={ 'white' } size={ 500 } progress={ progress } />
  );
};

Author

@kazimkazam

Repository

@Github

@npm

License

MIT © kazimkazam