CSS3環形進度條是一種常用的進度條樣式,在網頁設計中可以使用它來展示處理進度或者展示數據百分比等。
.progress-wrapper{ position:relative; width: 80px; height: 80px; } .progress-bar{ position:absolute; top:0; left:0; width:100%; height:100%; border-radius:50%; clip:rect(0px,80px,80px,40px); background-color:#eee; transform:rotate(-90deg); } .progress-circle{ position:absolute; top:0; left:0; width:100%; height:100%; border-radius:50%; clip:rect(0px,40px,80px,0px); background-color:#fff; transform:rotate(-90deg); } .progress-fill{ position:absolute; top:0; left:0; width:100%; height:100%; border-radius: 50%; clip: rect(0px, 40px, 80px, 0px); background-color: #007aff; z-index:1; transform-origin: 50% 50%; } .progress-fill::before { content: ""; position: absolute; top: 0; left: 50%; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: #ffffff; transform: translate(-50%, -50%); }
以上是CSS代碼實現環形進度條的樣式,通過clip屬性限定展示區域,通過transform實現旋轉等效果,再通過z-index屬性將填充區域置于底層,即可實現一種基礎的環形進度條效果。
在實際開發當中,我們還可以根據需求修改進度條的顏色、大小以及各個元素的位置等屬性,以達到最終的期望效果。
下一篇mysql查詢列數量