用react制作半圆形进度条

组件

import React, { Component } from 'react';

import PropTypes from 'prop-types';

export default class Progress extends Component {

    constructor(props) {

        super(props);

        this.state = {

            degCss: 'rotate(0)'

        };

    }

    scoreNum = () => {

        if (!this.props.score) {

            return false;

        }

        let degNum = (this.props.score / 100) * 180;

        let degCss2 = 'rotate(' + degNum + 'deg)';

        this.setState({

            degCss: degCss2

        });

    };

    componentDidMount() {

        this.scoreNum();

    }

    render() {

        const circleBoxStyle = {

            position: 'relative',

            width: '100px',

            height: '50px',

            margin: '10px'

        };

        const topStyle = {

            top: '0',

            clip: 'rect(0, auto, 50px, auto)',

            width: '100px',

            height: '100px',

            background: '#D3D9E2',

            transition: '5s ease-out',

            transform: this.state.degCss,

            position: 'absolute',

            overflow: 'hidden',

            borderRadius: '50%'

        };

        const maskStyle = {

            position: 'absolute',

            overflow: 'hidden',

            borderRadius: '50%',

            top: '8px',

            left: '8px',

            clip: 'rect(0, auto, 42px, auto)',

            width: '84px',

            height: '84px',

            background: '#06173C'

        };

        const circleStyle = {

            position: 'absolute',

            top: '0',

            left: '0',

            clip: 'rect(0, auto, 50px, auto)',

            width: '100px',

            height: '100px',

            borderRadius: '50%',

            background: this.props.progressColor,

            zIndex: '0'

        };

        const numStyle = {

            position: 'relative',

            zIndex: '4',

            // marginTop: '13px',

            fontSize: '20px',

            color: '#fff',

            textAlign: 'center',

            fontWeight: 'bold',

            bottom: '-28px',

            justifyContent: 'center',

            display: 'flex'

        };

        const circleBoxTitleCls = {

            position: 'absolute',

            bottom: '-17px',

            width: '100%',

            display: 'flex',

            justifyContent: 'center'

        };

        return (

            <div className="circleBox" style={circleBoxStyle}>

                <div className="circle" style={circleStyle}>

                    <div id="top-score" className="top" style={topStyle}></div>

                    <div id="num" style={numStyle}>

                        {this.props.score ? this.props.score : null}

                    </div>

                    <div className="mask" style={maskStyle}></div>

                </div>

                <div className="circleBoxTitleCls" style={circleBoxTitleCls}>

                    {this.props.text ? (

                        <p

                            style={{

                                textAlign: 'center',

                                fontSize: '10px',

                                margin: '0',

                                lineHeight: '1'

                            }}

                        >

                            {this.props.text}

                        </p>

                    ) : null}

                </div>

            </div>

        );

    }

}

Progress.propTypes = {

    //  当前进度条所处的位置

    score: PropTypes.number.isRequired,

    //  当前进度条显示的文字

    text: PropTypes.number.isRequired,

    //  进度条的颜色

    progressColor: PropTypes.string.isRequired

};

调用传值

<Progress score={80} text={'总体评价'} progressColor={'#3578F6'} />