CSS3圓形進度條動畫效果

<風格>
內文{背景顏色：#fff}
@-webkit-keyframes 載入 {
0% {
# 筆劃-dashoffset: 0;
}
}
@關鍵影格載入{
0% {
# 筆劃-dashoffset: 0;
}
}
。進步 {＃＃＃ 位置：相對；
顯示：內聯區塊；
填充：0;
文字對齊：居中；
}
.進度>李{
顯示：內聯區塊；
位置：相對；
文字對齊：居中；
顏色：#93A2AC；
字體系列：Lato；
字體粗細：100；
保證金：2rem;
}
.進度>李：在{
之前 內容：attr(資料名稱);
位置：絕對；
寬度：100%；
底部：-2rem;
字體粗細：400；
}
.進度>李:{
之後 內容：attr(資料百分比);
位置：絕對；
寬度：100%；
頂部：3.7rem；
左：0；
字體大小：2rem;
文字對齊：居中；
}
.progress svg {
寬度：10rem；
高度：10rem；
}
.progress svg:nth-child(2) {
位置：絕對；
左：0；
頂部：0；
-webkit-transform: 旋轉(-90deg);
變換：旋轉(-90deg);
}
.progress svg:nth-child(2) 路徑 {
填充：無；
筆畫寬度：25；
筆畫破折號數組：629；
中風：#fff;
不透明度：.9；
-webkit-animation: 載入 10s;
動畫：載入 10 秒；
}
</風格>