效果图

css代码

.CircelProcess{
    position: relative;
    width: 100%;
    height: 100%;
}
.CircelProcess *{
    box-sizing: border-box;
}

.CircelProcess svg{
    transform: rotate(-90deg);
}

.ProcessCircle{
    transition: stroke-dashoffset 500ms cubic-bezier(0.99, 0.01, 0.62, 0.94);
}

js代码

import React from 'react'
import PropTypes from 'prop-types'
import './style.css'

class CircelProcess extends React.Component {
    static propTypes = {
        ratio: PropTypes.number,
        strokeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
        percent: PropTypes.number.isRequired
    }
    static defaultProps = {
        strokeColor: '#F9C97B',
        ratio: 0.1
    }
    constructor(props) {
        super(props)
        let {ratio} = props
        let  r = 50 /(1 + ratio)
        let circumference = Math.PI * 2 * r
        this.state = {
            strokeDashoffset: circumference
        }
    }
    componentWillUnmount() {
        this.mounted = false
    }
    componentDidMount() {
        this.mounted = true
        let { percent, ratio } = this.props
        let  r = 50 /(1 + ratio)
        let circumference = Math.PI * 2 * r
        let strokeDashoffset = circumference - circumference * percent / 100.0
        setTimeout(() => {
            if (this.mounted) {
                this.setState({
                    strokeDashoffset
                })
            }
        }, 300)
    }
    render() {
        let { ratio} = this.props
        let { strokeDashoffset } = this.state
        let  r = 50 /(1 + ratio)
        let strokeDasharray = Math.PI * 2 * r
        let strokeWidth = r * ratio
        return (
            <div className='CircelProcess'>
                <svg width='100%' height='100%'
                    viewBox='0 0 100 100'>
                    <circle
                        className='BackgroundCircle'
                        cx={50}
                        cy={50}
                        r={r}
                        strokeWidth={strokeWidth}
                        stroke='#D3D3D3'
                        strokeOpacity={0.2}
                        fill='none' />
                    <circle
                        className='ProcessCircle'
                        cx={50}
                        cy={50}
                        r={r}
                        strokeWidth={strokeWidth}
                        stroke='url(#strokecolor)'
                        // strokeLinejoin='round'
                        strokeLinecap='round'
                        strokeDasharray={strokeDasharray}
                        strokeDashoffset={strokeDashoffset}
                        fill='none' />
                    <defs>
                        <linearGradient id='strokecolor' x1="0%" y1="0%" x2="100%" y2="0%">
                            <stop offset="0%" stopColor={'#00B3BC'} />
                            <stop offset="100%" stopColor={'#89D87A'} />
                        </linearGradient>
                    </defs>
                </svg>
            </div>
        )
    }
}

export default CircelProcess

实现思路：

1. 外层div作为组件容器，class设置宽、高为100%以自适应组件外层容器宽高，实现根据外容器宽、高变化自动变化；

<div className='CircelProcess'></div>

2.