CSS 實現環形進度條靜態，可以用來顯示進度或者比例等信息，它簡單易用且具有良好的視覺效果。

/* 環形進度條樣式 */
.progress {
width: 100px;
height: 100px;
border-radius: 50%;
border: 10px solid #eee;
position: relative;
}
/* 進度條底部灰色圓環 */
.progress span {
position: absolute;
top: -10px;
left: -10px;
width: 100%;
height: 100%;
border-radius: 50%;
border: 10px solid #eee;
box-sizing: border-box;
}
/* 進度信息文本 */
.progress p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
text-align: center;
font-size: 18px;
font-weight: bold;
color: #333;
}
/* 進度條藍色圓環 */
.progress:before {
content: "";
position: absolute;
top: -10px;
left: -10px;
width: 100%;
height: 100%;
border-radius: 50%;
border: 10px solid #00f;
border-top-color: transparent;
border-right-color: transparent;
transform: rotate(0deg);
box-sizing: border-box;
}
/* 改變進度條藍色圓環角度 */
.progress[data-progress="25"]:before {
transform: rotate(90deg);
}
.progress[data-progress="50"]:before {
transform: rotate(180deg);
}
.progress[data-progress="75"]:before {
transform: rotate(270deg);
}
.progress[data-progress="100"]:before {
transform: rotate(360deg);
}

以上代碼中，我們首先定義了一個進度條容器的樣式，包括了容器的大小、邊框、圓角等信息。然后我們用before偽元素繪制了一個藍色的圓環，并且通過rotate變換來改變圓環的角度，從而實現進度的顯示。

最后，我們通過給進度條容器添加"data-progress"自定義屬性來控制進度的角度，再在CSS中編寫相應的選擇器來調整藍色圓環的位置和角度。