Pie progress component for React

README.md

Demo: http://codepen.io/chitsaou/pen/RWNWjG

How to draw a pie progress: http://codepen.io/jo-asakura/pen/stFHi

Pie.jsx

var Pie = React.createClass({
  defaultProps: {
    percentage: 0
  },
  calculateAngle: function(percentage) {
    return (percentage) * (360 / 100);
  },
  render: function() {
    var angle = this.calculateAngle(this.props.percentage);

    var leftStyle = {
      transform: "rotate(" + angle + "deg)"
    };
    
    var className = "pie";
    
    if (this.props.percentage > 50) {
      className += " overhalf";
    } else {
      className += " underhalf";
    }

    return (
      <div className={ className }>
        <div className="circle left-side" style={leftStyle}></div>
        <div className="circle right-side"></div>
      </div>
    );
  }
});

pie.scss

/* modified from http://codepen.io/jo-asakura/pen/stFHi */

.pie {
  width: 100%;
  height: 100%;
  position: relative;
  
  .circle {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: black;

    border-radius: 50%;
    -webkit-clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
    -moz-clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
    
    &.right-side {
      transform: rotate(180deg);
    }
  }

  &.underhalf {
    -webkit-clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
    -moz-clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);

    .right-side {
      display: none;
    }
  }
}

// control custom styles here

.progress-a .pie {
  width: 300px;
  height: 300px;
}

.progress-b .pie {
  width: 300px;
  height: 300px;

  .circle {
    background-color: transparent;
    border: 20px solid green;
  }
}