圆形进度条

只记录了大致方案，具体百分比计算方法请自行处理。

1、svg 实现

<svg  width="36" height="36" viewport="0 0 100 100"   className={styles.circle} >

          <circle r="16" cx="18" cy="18"  fill="transparent" stroke="#d8d8d8" strokeWidth="2" />

          <circle r="16" cx="18" cy="18" fill="transparent" stroke="#0084ff" strokeWidth="2"

            stroke-dashArray={Math.PI * 32} strokeDashoffset={(1 - 0.1) * Math.PI * 32} />

 </svg>

2、css 实现

<div className={styles.circleProgressWrapper}>

          <div className={cx(styles.wrapper, {[styles.left]: true})}>

            <div className={cx(styles.circleProgress, {[styles.leftcircle]: true })} />

          </div>

          <div className={cx(styles.wrapper, {[styles.right]: true})}>

            <div className={cx(styles.circleProgress, { [styles.rightcircle]: true, })}  />

          </div>

</div>

.circleProgressWrapper {

  width: 200px;

  height: 200px;

  position: relative;

}

.wrapper {

  width: 100px;

  height: 200px;

  position: absolute;

  top: 0;

  overflow: hidden;

}

.right {

  right: 0;

}

.left {

  left: 0;

}

.circleProgress {

  width: 160px;

  height: 160px;

  border: 20px solid transparent;

  border-radius: 50%;

  position: absolute;

  top: 0;

  transform: rotate(45deg);

}

.rightcircle {

  border-bottom: 20px solid green;

  border-left: 20px solid green;

  transform: rotate(65deg);

  right: 0;

}

.leftcircle {

  border-top: 20px solid green;

  border-right: 20px solid green;

  left: 0;

}

3、canvas实现

import React, {Component} from 'react'

import cx from 'classnames'

import styles from './PlayProgressCircle.css'

let context = ''

let centerX = ''

let centerY = ''

let rad = 0

class PlayProgressCircle extends Component {

  componentDidMount() {

    if (!this.canvasContainer) {

      return

    }

    const canvas = this.canvasContainer //获取canvas元素

    context = canvas.getContext('2d') //获取画图环境，指明为2d

    centerX = canvas.width / 2 //Canvas中心点x轴坐标

    centerY = canvas.height / 2 //Canvas中心点y轴坐标

    //加载的快慢就靠它了

    this.drawFrame()

    setInterval(() => {

      rad += 0.1

      if (rad > 1) {

        rad = 0

      }

      context.clearRect(0, 0, canvas.width, canvas.height);

      this.drawFrame()

    }, 1000)

  }

  drawFrame = () => {

    this.blueCircle()

    this.whiteCircle()

  }

  //绘制5像素宽的运动外圈

  blueCircle = () => {

    context.save()

    context.strokeStyle = '#fff' //设置描边样式

    context.lineWidth = 5 //设置线宽

    context.beginPath() //路径开始

    context.arc(centerX, centerY, 100, 0, 360)

    context.stroke() //绘制

    context.closePath() //路径结束

    context.restore()

  }

  //绘制白色外圈

  whiteCircle = () => {

    context.save()

    context.beginPath()

    context.lineWidth = 2 //设置线宽

    context.strokeStyle = 'red'

    context.arc(centerX, centerY, 100, 0, rad * 2 * Math.PI, false)

    context.stroke()

    context.closePath()

    context.restore()

  }

  render() {

    return (

      <div className={styles.root}>

        <canvas

          ref={el => (this.canvasContainer = el)}

          width="500"

          height="500"

        />

      </div>

    )

  }

}

export default PlayProgressCircle