CSS3簡單寫個圓形進度條動畫

html

#wrap

/*底部圓圈*/
#wrap::before
/*左右兩個盒子裡面各放著乙個半圓圈，主要overflow*/
.box-left, .box-right
.box-left, .circle-left
.box-right, .circle-right
.circle-left, .circle-right
/*左邊盒子裡的圓圈初始時只顯示右半邊*/
.circle-left
/*右邊盒子裡的圓圈初始時只顯示左半邊*/
.circle-right
@keyframes circlerotate
to }

先在html中加上顯示進度數值的元素，及進度條完成時彈出對勾的元素。

接著上面的css繼續寫，先注釋掉上面的 animation （因為接下來要用js來完成動畫）。

/*新加元素的樣式*/

.mark-box
.checkmark
.checkmark::before, .checkmark::after
.checkmark::before
.checkmark::after
.checkmark.active::before
.checkmark.active::after

用 requestanimationframe 完成動畫

let circleleft = document.queryselector('.circle-left');

let circleright = document.queryselector('.circle-right');
let checkmark = document.queryselector('.checkmark');
let textnode = document.queryselector('.mark-box > .number');
function go(start, target)
let progress = start;
let now = start;
//用定時器模擬進度增長
setinterval(() => , 100)
//let num = 0;  //測試標記
function grow()
//如果進度數值有變化才做dom操作
if(progress !== now)deg)`;
}else if(progress > 50)deg)`;
//如果進度值達到100了，那就彈出對勾
if(progress === 100)}}
requestanimationframe(grow);
}requestanimationframe(grow);
}      
go(0, 108);

Css3圓形進度條

圓形進度條原理 1 先設定乙個進度容器 目的為了旋轉 在容器中設定兩個隱藏容器，分為左右 目的為了隱藏半圓 再設定兩個半圓邊框 目的是容器再轉動的時候慢慢顯示出來 2 讓每個半圓邊框 與進度條邊框大小一致 超出隱藏容器的，3 讓內容溢位部分 隱藏 4 通過旋轉 讓半圓慢慢顯示 5 左邊的半圓 50 ...

常見 CSS3進度條Loading動畫

現在，gif 格式的進度條已經越來越少，css 進度條如雨後春筍般湧現。css3的崛起，更使得動態效果得以輕鬆實現，未來，必定是css3的天下，所以今天我就來分享一下幾個常見的css3進度條loading動畫。首先，我們來看一下大概要講的幾種進度條都長啥樣 現在開始，來講一下各進度條的做法 第乙個進...

css3 實現進度條

首先圓圈進度條是一直在旋轉的，旋轉我們可以利用的是css3的rotate deg 實現乙個二維旋轉的css3屬性，作用是將指定元素旋轉指定的角度,正值表示順時針方向旋轉，負值表示逆時針防線旋轉，旋轉的角度範圍為 360deg 360deg 一般的進度條的是長這樣的 這可以看成是乙個圓弧在一直旋轉，h...