使用css3實現環形進度條

有詢問原始碼的盆友，整理了一下把原始碼鏈結放上吧！我是原始碼鏈結

進度條效果如下：

整圓的效果處理會簡單些，不完整環實現起來細節多點。下邊是實現邏輯和過程。

進度條組成：

環形：兩種顏色進度條，當餘量少於50%時進度條顏色由綠色變為黃色。進度條結構由兩個疊加環形組成；上疊加環形展示剩餘量，深色；下疊加環形展示100%總量，淺色。

樣式實現：

1：畫乙個方形，如圖中陰影部分所示：

2：方形中畫兩個等大均分方形的矩形，(注意每個矩形一定要設定：overflow:hidden)如圖中陰影部分所示：

3：進度條由兩個疊加環形組成，所以第一步的方形中需要畫四個等大的矩形用來展示不同部分的環形。

4：每個矩形中畫乙個和父級方形等大的方形，用來展示環形，左半矩形中的環形只設定上邊框和左邊框；右半矩形中的環形只設定上邊框和右邊框，如圖中陰影所示：

5：實現進度條的動態百分比進度，使用css3的transform:rotate將上疊加環形根據實際百分比換算成實際的旋轉角度來實現。

當剩餘量大於50%時左側上疊加環形旋轉角度不用變，只有計算右測上疊加環形旋轉角度即可。

當剩餘量小於百分之50%時，左側上疊加環形旋轉時，就會將左半環形展示為完整的半環，此時就需要乙個用來遮擋左側超出進度範圍環形部分的左側環；如下圖所示:

html**如下：

//percent小於50時需要使用遮罩進行遮擋超出環形範圍部分

剩餘'+circledata.percent+'%

.progress_wrap

.rightcircle
.leftcircle
}.up
.rightcircle
.leftcircle
}//用遮擋實現左側剩餘百分比，遮住超出環形範圍部分；核心是使用同心圓進行邊框進行遮擋
.up_left_cover}}
&.more
.rightcircle
.leftcircle
}.up
.rightcircle
.leftcircle}}
.right,.left
.rightcircle
.leftcircle
}.right
.left
.num
}

function giftcircleprogressfn(per);

var percent = parseint(per);
//領取進度環形顏色classname
var halfclassname = percent<50?"little":"more";
//左半環遮罩層顯示樣式狀態
var leftcircledisplay = percent<50?"block":"none";
var leftrotate = 0;
var rightrotate = 0;
//以50%為界限;<50%:右半圓佔比為0,左半圓需要使用遮罩進行遮擋,展示剩餘部分
//           >50%:左半圓佔比100%,右半圓直接使用百分比計算所佔部分即可
//注意：在半圓中計算百分比時,要將百分比乘以2。
if(percent<50)else
circledata = 
return circledata
}

如有什麼好的建議，歡迎多多交流呀。

使用CSS3實現環形進度條效果

進度條效果如下 整圓的效果處理會簡單些，不完整環實現起來細節多點。下邊是實現邏輯和過程。進度條組成 環形 兩種顏色進度條，當餘量少於50 時進度條顏色由綠色變為黃色。進度條結構由兩個疊加環形組成 上疊加環形展示剩餘量，深色 下疊加環形展示100 總量，淺色。樣式實現 1 畫乙個方形，如圖中陰影部分所...

css3 實現進度條

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

CSS3實現動態進度條

css3的線性漸變使製造動態進度條成為可能。現在就來一步一步講解如何建立動態進度條吧。以chrome瀏覽器webkit核心為例。目標進度條，背景是淡藍色，上面平鋪了一層傾斜的深藍色條狀矩形。我們可以這樣寫 box box 這裡用到了線性漸變 webkit linear gradient 逆時針傾斜的...