前端 环形统计_css3与js实现环形百分比加载

circle.gif

原理

HTML

圆环构成

整个环有一大一小两个圆组成，内层较小的作为遮盖层，利用颜色不同遮住较大的圆，从而构成一个环。

background-image属性和linear-gradient()来控制颜色。

第一个linear-gradient()函数生成的背景图像上面灰色，下面透明，旋转90deg后，右边灰色，左边透明显示本色；

第二个linear-gradient()的作用相反，所以此时整个环显示的是灰色。

//less

.percent-circle {

.circle {

position: relative;

top: 5px;

left: 5px;

color: black;

text-align: center;

width: 100px;

height: 100px;

line-height: 100px;

border-radius: 100%;

background-color: azure;

}

.circle-border {

position: relative;

text-align: center;

width: 110px;

height: 110px;

margin-left: 30%;

border-radius: 100%;

background-color: green;

background-image: linear-gradient(90deg, transparent 50%,rgb(197, 207, 207) 50%),

linear-gradient(90deg, rgb(192, 206, 206) 50%, transparent 50%);

}

}

改变百分比状态

js将第一个linear-gradient()创造的背景旋转，灰色部分逐渐左移与第二个重合，其透明部分逐渐将圆的本色显示出来。

当其透明部分完全转出来的时候，将它复位为初始状态，同时将灰色部分替换为圆的本色，再次旋转就会逐渐覆盖掉第二个的灰色。

从始至终只有第一个linear-gradient()的背景图像在变化，第二个只是作为遮盖。

let i = 0, id, c = document.getElementById('circle'), ct = document.getElementById('circle-text')

let fun = function () {

if (i > 360) {

cancelAnimationFrame(id)

return

}

if (i < 180)

c.style.backgroundImage = 'linear-gradient(' + (90 + i) + 'deg, transparent 50%, rgb(192, 206, 206) 50%),linear-gradient(90deg, rgb(192, 206, 206) 50%, transparent 50%)'

else

c.style.backgroundImage = 'linear-gradient(' + (i - 90) + 'deg, transparent 50%, green 50%),linear-gradient(90deg, rgb(192, 206, 206) 50%, transparent 50%)'

i++

ct.textContent = parseInt(i/3.6) + '%'

id = window.requestAnimationFrame(fun)

}

fun()