怎麼實現這樣一個圓環進度條的效果呢,可使用canvas、svg、GIF等等方式,今天咱們來講下使用css3怎麼來實現。css
圓環很簡單,一行cssborder-radius:50%
便可實現,並且沒有兼容性問題,什麼,你說IE,讓它滾...html
咱們這裏須要三個圓環,一個整的,兩個半的。大概畫了下圖css3
這裏半圓環我使用了clip
進行裁剪,主要代碼以下,canvas
.left{
width: 200px;
height: 200px;
border-radius: 50%;
border: 10px solid lightblue;
position:absolute;
top: -10px; /* 10的緣由是由於邊框是10個像素 */
right: -10px;
clip: rect(0 100px 200px 0); /* 上面爲0 右邊到100px 下面200px 左邊到0 這個區域的咱們裁剪出來 */
}
複製代碼
右邊相似只是裁剪位置改了bash
.right{
width: 200px;
height: 200px;
border-radius: 50%;
border: 10px solid lightblue;
position:absolute;
top: -10px; /* 10的緣由是由於邊框是10個像素 */
right: -10px;
clip: rect(0 200px 200px 100px); /* 位置更改,計算能夠參考上圖 */
}
複製代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
box-sizing: border-box;
}
.box{
width: 200px;
height: 200px;
position: relative;
background-color: #ccc;
border-radius: 50%;
left: 40%;
top: 200px;
}
.num{
position: absolute;
top: 50%;
left: 50%;
background: #fff;
border-radius: 50%;
width: 180px;
height: 180px;
transform: translate(-50%, -50%);
text-align: center;
line-height: 180px;
font-size: 32px;
}
.clip{
width: 200px;
height: 200px;
position: absolute;
border: 10px solid #ccc;
border-radius: 50%;
clip: rect(0, 200px, 200px, 100px);
}
.left{
width: 200px;
height: 200px;
position: absolute;
border: 10px solid lightblue;
border-radius: 50%;
clip: rect(0 100px 200px 0);
top: -10px;
left: -10px;
}
.right{
width: 200px;
height: 200px;
position: absolute;
border: 10px solid lightblue;
border-radius: 50%;
clip: rect(0 200px 200px 100px);
top: -10px;
left: -10px;
}
.width-none{
width: 0;
}
.auto{
clip: auto;
}
</style>
</head>
<body>
<div class="box">
<div class="clip">
<div class="left"></div>
<div class="right width-none"></div>
</div>
<div class="num">
</div>
</div>
<script >
let clip = document.querySelector('.clip'),
left = document.querySelector('.left'),
right = document.querySelector('.right'),
num = document.querySelector('.num'),
rotate = 0;
let loop = setInterval(() => {
if(rotate >= 100){
rotate = 0;
right.classList.add('width-none');
clip.classList.remove('auto');
} else if(rotate > 50){
right.classList.remove('width-none');
clip.classList.add('auto');
}
rotate++;
left.style.transform = 'rotate('+ 3.6*rotate + 'deg)';
num.innerHTML = `${rotate}%`
},100)
</script>
</body>
</html>
複製代碼
簡單說下上面的代碼svg
一、首先隱藏了右半圓,這是由於咱們須要旋轉的是左半圓,咱們能夠等左半圓轉到右邊圓的位置再顯示右 邊,就是等到旋轉到180度的時候。wordpress
二、同時咱們看到主圓添加了clip: rect(0, 200px, 200px, 100px);
裁剪樣式,這是由於默認咱們 進度是0%的,咱們只顯示右邊的話才能隱藏左邊,可是咱們右邊不是隱藏的嗎?那顯示它幹嗎呢,由於 旋轉左邊的時候就看到轉到右邊的圓了。稍微有點繞,請結合代碼,多多理解oop
三、等到左邊旋轉了180咱們須要將右邊顯示出來,而且將box
元素的裁剪設置爲默認值,就是不裁剪,這 這樣才能顯示完整的左右兩個圓。ui
四、最後咱們使用js來控制旋轉角度並將百分比顯示在頁面上spa
若是上面的解釋看不明白,索性就不要看了,把代碼放在本地調試下,本身去理解。
別鑽牛角尖,代碼是最好的語言。
使用clip才實現圓環進度仍是很簡單的,還不須要考慮兼容性,關於clip能夠看張鑫旭大神的日誌