只记录了大致方案，具体百分比计算方法请自行处理。
1、svg 实现
stroke-dashArray={Math.PI * 32} strokeDashoffset={(1 - 0.1) * Math.PI * 32} /> 2、css 实现
.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 (
ref={el => (this.canvasContainer = el)} width="500" height="500" />
)
}
}
export default PlayProgressCircle