react 实现圆环进度条

import React, { useState, useEffect } from "react"

import { css } from "emotion"

//num是从父级传来的百分比数值

export default function({ num }) {

let rightTrnas = css`

      transform: rotate(0deg);

`

let leftTrnas = css`

     transform: rotate(${0}deg);

 `

if (num <= 180) {

    rightTrnas = css`

       transform: rotate(${(Math.round(num * 100) / 100) * 3.6}deg);

    `

} else {

     rightTrnas = css`

        transform: rotate(180deg);

     `

     leftTrnas = css`

       transform: rotate(${(Math.round(num * 100) / 100) * 3.6 - 180}deg);

`

}

return (

        <div className={circleCss}>

               <div className="circle">

                     <div className="pie_left">

                          <div className={`left ${leftTrnas}`}></div>

                    </div>

                    <div className="pie_right">

                          <div className={`right ${rightTrnas}`}></div>

                    </div>

                   <div className="mask">

                            <span>{Math.round(num * 100) / 100}</span>%

                    </div>

              </div>

         </div>

     )

}

const circleCss = css`

         display: flex;

         justify-content: center;

         align-items: center;

         & .circle {

            width: 50px;

            height: 50px;

            position: relative;

            border-radius: 50%;

            background: #e9e9e9;

         }

       & .pie_left,

       & .pie_right {

           width: 50px;

           height: 50px;

           position: absolute;

           top: 0;

           left: 0;

        }

       & .left,

       & .right {

            width: 50px;

            height: 50px;

            background: #ff721c;

            border-radius: 50%;

            position: absolute;

            top: 0;

            left: 0;

          }

      & .pie_right,

      & .right {

          clip: rect(0, auto, auto, 25px);

       }

      & .pie_left,

      & .left { 

           clip: rect(0, 25px, auto, 0);

      }

      & .mask {

            width: 44px;

            height: 44px;

            border-radius: 50%;

            left: 3px;

            top: 3px;

            background: #fff;

            position: absolute;

            text-align: center;

            line-height: 44px;

            font-size: 12px;

            color: #ff721c;

       }

  `

如果要修改圆环的大小修改宽高和left ，right中的 clip: rect的值即可