rc-progress@2.6.1

progress ui component for react

import 'rc-progress/assets/index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { Circle } from 'rc-progress';

const Example = () => {
  const circleContainerStyle = {
    width: '250px',
    height: '250px',
    display: 'inline-block',
  };
  return (
    <div>
      <h3>Circle Progress {90}%</h3>
      <div style={circleContainerStyle}>
        <Circle
          percent={90}
          strokeWidth="6"
          strokeLinecap="round"
          strokeColor={{
            '0%': '#108ee9',
            '100%': '#87d068',
          }}
        />
      </div>
      <h3>Circle Progress {100}%</h3>
      <div style={circleContainerStyle}>
        <Circle
          percent={100}
          strokeWidth="6"
          strokeLinecap="round"
          strokeColor={{
            '100%': '#108ee9',
            '0%': '#87d068',
          }}
        />
      </div>
      <h3>Circle With Success Percent {65}%</h3>
      <div style={circleContainerStyle}>
        <Circle
          percent={[65, 100]}
          strokeWidth="6"
          strokeLinecap="round"
          strokeColor={[
            '#87d068',
            {
              '100%': '#108ee9',
              '0%': '#87d068',
            },
          ]}
        />
      </div>
    </div>
  );
};

ReactDOM.render(<Example />, document.getElementById('__react-content'));
Fork me on GitHub