JavaScript HTML CSS
Switch branches/tags
Nothing to show
Latest commit 19e1fed Mar 14, 2017 @wangzuo wangzuo committed on GitHub Update README.md
Permalink
Failed to load latest commit information.
carview.php?tsp= __fixtures__ tests Mar 14, 2017
carview.php?tsp= __tests__ tests Mar 14, 2017
carview.php?tsp= dist Mark color props as required Mar 13, 2017
carview.php?tsp= example fix deploy Nov 18, 2015
carview.php?tsp= lib Mark color props as required Mar 13, 2017
carview.php?tsp= .babelrc React v15 compatibility Sep 21, 2016
carview.php?tsp= .gitignore fix deploy Nov 18, 2015
carview.php?tsp= .travis.yml add travis Mar 14, 2017
carview.php?tsp= LICENSE Initial commit Jul 7, 2015
carview.php?tsp= README.md Update README.md Mar 14, 2017
carview.php?tsp= index.d.ts Add typescript definition file Mar 13, 2017
carview.php?tsp= index.js 1.0.0 Jul 7, 2015
carview.php?tsp= package.json add react to dev deps Mar 14, 2017
carview.php?tsp= screenshot.png update readme Jul 29, 2015
carview.php?tsp= webpack.config.js react 0.14.0 fix #1 Oct 24, 2015
carview.php?tsp= yarn.lock add react to dev deps Mar 14, 2017

README.md

react-progress-label Build Status

progress label component copied from kirualex/KAProgressLabel with svg

screenshot

Installation

npm install react-progress-label --save

Demo

https://wangzuo.github.io/react-progress-label

Usage

var React = require('react');
var ProgressLabel = require('react-progress-label');
var App = React.createClass({
  displayName: 'App',
  render() {
    var progress = 50;
    var textStyle = {
      'fill': '#ffffff',
      'textAnchor': 'middle'
    };
    return (
      <ProgressLabel
        progress={progress}
        startDegree={60}
        progressWidth={8}
        trackWidth={20}
        cornersWidth={4}
        size={400}
        fillColor="black"
        trackColor="red"
        progressColor="green">
        <text x="200" y="200" style={textStyle}>{`${progress}%`}</text>
      </ProgressLabel>
    );
  }
});

License

ISC