rc-progress-extend

    2.3.25 • Public • Published

    rc-progress-extend

    Progress Bar.

    NPM version build status Test coverage gemnasium deps node version npm download

    Example

    https://kaqiinono.github.io/rc-progress-extend

    Screenshots

    Browsers

    • support IE9+, Chrome, Firefox, Safari

    Install

    rc-progress

    Usage

    import { Line, Circle } from 'rc-progress';
     
    ReactDOM.render(<div>
      <Line percent="10" strokeWidth="4" strokeColor="#D3D3D3" />
      <Circle percent="10" strokeWidth="4" strokeColor="#D3D3D3" />
      <Circle
                percent={percent}
                text={`${percent}%`}
                textStyle={{ fontSize: '100px', color: 'red' }}
                strokeWidth="10"
                trailWidth="12"
                strokeColor="url('#grad1')"
                strokeLinecap="round"
                trailColor="rgba(228,246,255,.3)"
                gapDegree="0"
                gapPosition="top"
              />
    </div>, container);

    API

    props

    name type default description
    strokeWidth Number 1 Width of the stroke. Unit is percentage of SVG canvas size.
    strokeColor String #2db7f5 Stroke color.
    trailWidth Number 1 Width of the trail stroke. Unit is percentage of SVG canvas size. Trail is always centered relative to actual progress path. If trailWidth are not defined, it same as strokeWidth.
    trailColor String #D9D9D9 Color for lighter trail stroke underneath the actual progress path.
    strokeLinecap String 'round' The shape to be used at the end of the progress bar, can be `butt`, `square` or `round`.
    prefixCls String rc-progress prefix className for component
    className String customized className
    style Object style object will be added to svg element
    percent Number 0 the percent of the progress
    gapDegree Number 0 the gap degree of half circle, 0 - 360
    gapPosition String top the gap position, value: top, bottom, left, right.

    Installation

    npm install --save rc-progress-extend
    

    Development

    npm install
    npm start
    

    License

    rc-progress-extend is released under the MIT license.

    Install

    npm i rc-progress-extend

    DownloadsWeekly Downloads

    27

    Version

    2.3.25

    License

    none

    Unpacked Size

    347 kB

    Total Files

    24

    Last publish

    Collaborators

    • kaqiinono