🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

react-js-progressbar

Package Overview
Dependencies
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-js-progressbar

React library to help developers to draw animated, cross-browser, highly customizable progress circles using SVG.

1.1.1
latest
Source
npm
Version published
Maintainers
1
Created
Source

react-js-progressbar


npm npm bundle size NPM

  • React library to help developers to draw animated, cross-browser, highly customizable progress circles using SVG.

Installation

npm install react-js-progressbar

Usage

//...
import Progressbar from 'react-js-progressbar';

export default function App() {
  const [percentage, setPercentage] = useState(0);

  const change_progressbar_input = () => {
    setPercentage(50);
  };

  return (
    <>
      <div id='progressbarContainer'>
        <Progressbar
          input={percentage}
          pathWidth={10}
          pathColor={['#56ab2f', '#a8e063']} // use an array for gradient color.
          trailWidth={20}
          trailColor='#363636' // use a string for solid color.
          textStyle={{ fill: 'red' }} // middle text style
        >
          // children goes here, an image for example. (optional)
        </Progressbar>
      </div>
    </>
  );
}

Props

input : [Number]

  • Progressbar percentage a value between 0 and 100.

shape : [ 'semi circle' | 'full circle' | 'arc' ] [optional]

  • Progressbar shape style.
  • Default Value full circle

size : [ Number | String ] [optional]

  • Progressbar size (width * height).
  • Default Value 100%

clockwise : [Boolean] [optional]

  • Whether to rotate progressbar in clockwise direction.
  • Default Value true

pathWidth : [Number] [optional]

  • Progressbar filling path width (stroke width).
  • Default Value 12

pathColor : [ String | String[] ] [optional]

  • Progressbar filling path color (stroke color).
  • Accepts one string for a solid color or array of two strings for gradient color.
  • Default Value ['#f4314a', '#fa5813']

pathLinecap : [ 'butt' | 'round' | 'square' | 'none' ] [optional]

  • Progressbar filling path line cap shape.
  • Default Value round

pathShadow : [String] [optional]

  • Progressbar filling path drop shadow.
  • Syntax "offset-x offset-y blur-radius color"
  • Doesn't works for 'arc' shape and when dashed is enabled.
  • Use 'none' to remove the shadow.
  • Default Value 0px 0px 2px #00000080

dashed : [Boolean] [optional]

  • Enable progressbar filling path dashed style (mask).
  • Default Value false

dashesSize : [Number] [optional]

  • Progressbar filling path dashes size and length.
  • Default Value 15

dashesGap : [Number] [optional]

  • The space between dashes.
  • Default Value 2

trailWidth : [Number] [optional]

  • Progressbar path trail width (stroke width).
  • Default Value 5

trailColor : [ String | String[] ] [optional]

  • Progressbar path trail color (stroke color).
  • Accepts one string for a solid color or array of two strings for gradient color.
  • Use 'none' to remove the trail.
  • Default Value lightgray

backgroundColor : [ String | String[] ] [optional]

  • Progressbar circle background color.
  • Accepts one string for a solid color or array of two strings for gradient color.
  • Use 'none' to remove the background.
  • Default Value none

customText : [String] [optional]

  • Progressbar middle custom text.
  • Use "" (empty string) to remove the text.
  • Default Value input + '%'

textPosition : [Object] [optional]

  • Align progressbar text on the x , y axis.
  • Default Value {x: '50%', y: '50%}
OptionDescriptionDefault Value
xAlign progressbar text on the x axis.'50%'
yAlign progressbar text on the y axis.'50%'

textStyle : [Object] [optional]

  • Progressbar middle text css inline style.
  • Note: use fill for text color.
  • Default Values { fontSize: '40px', fill: 'black' }

animateText : [Boolean] [optional]

  • Animate progressbar middle text from 0 to input value.
  • Doesn't work if customText value is given.
  • Default Value true

animation : [Object] [optional]

  • Progressbar animation options.
  • Default Values { duration: 500, delay: 0, ease: 'easeOutBack', animateOnMount: true, animateOnInputChange: true }
OptionTypeDescriptionDefault Value
animateOnMountBooleanAnimate on first render.true
animateOnInputChangeBooleanAnimate every time input value changes.true
durationNumberProgressbar animation duration in ms.500
delayNumberProgressbar animation delay in ms.0
easeString | FunctionCheck easings.net to learn more.'easeOutBack'

Keywords

react

FAQs

Package last updated on 20 Nov 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts