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的值即可
