React-radial-progress-motion NPM

react-radial-progress-motion

Radial progress with react-motion for transitions

Example Progress

Install

npm install --save react-radial-progress-motion

This component is uses react-motion, so ensure that is installed as well.

npm install --save react-motion

Usage

import React, { Component } from 'react'

import RadialProgress from 'react-radial-progress-motion'

class MyComponent extends Component {
  render () {
    return (
      <RadialProgress  />
    )
  }
}

Props

Prop	Input
`value`	Integer. Required. Value to display, defaults to min.
`min`	Integer. Minimum value of the scale, defaults to 0.
`max`	Integer. Maximum value of the scale, defaults to 100.
`width`	String. Width in `px` or `%` of radial meter (`100px`, `100%`). Defaults to `100%`
`startingPoint`	String. The min value start point; `top`, `bottom`, `left`, `right`, or degrees, (`-90`, `180`, `270`). Defaults to `top`
`radialStyle`	String. Adjust from full circle to a arc segment, simply provide percentage of circle in decimal value (.9, .5, .33), and it will create a semi-circle meter.
`spring`	Object. A react-motion spring config object e.g. `{stiffness: 120, damping: 17}`. Defaults to `{stiffness: 170, damping: 26}`. Please see react-motion documentation for full options.
`indWidth`	Integer. width of line-stroke of indicator bar `1-50`, defaults to `10`
`indColor`	String. color of indicator bar in hex, rgb, or rgba value `#111111`, `rgb(255,255,255)`, `rgba(255,255,255,1)`
`emptyIndWidth`	Integer. Width of line-stroke of empty indicator bar (the bar that is to be filled in)`1-50`, defaults to `10`
`emptyIndColor`	String. Color of empty indicator bar in hex, rgb, or rgba value `#111111`, `rgb(255,255,255)`, `rgba(255,255,255,1)`, defaults to `#efefef`.
`trackWidth`	Integer. Width of line-stroke of track bar `1-50`, defaults to `10`
`trackColor`	String. Color of track bar in hex, rgb, or rgba value `#111111`, `rgb(255,255,255)`, `rgba(255,255,255,1)`, defaults to `#e3e3e3`
`endCaps`	String. Shape of endcaps on lines, `round` or `square`, defaults to `round`