css 環形進度條?最近在做一小程序，看有的APP上表示完善度的進度環不錯，想在小程序和網站上實現，又想盡量不增加加載時間，這裡弄了個純CSS的，在小程序和網站上都跑通了，參考了網上的一些個例子，這裡總結一下，現在小編就來說說關于css 環形進度條?下面内容希望能幫助到你，我們來一起看看吧!

css 環形進度條

最近在做一小程序，看有的APP上表示完善度的進度環不錯，想在小程序和網站上實現，又想盡量不增加加載時間，這裡弄了個純CSS的，在小程序和網站上都跑通了，參考了網上的一些個例子，這裡總結一下

HTML:

<div class="blockOut0">

<div class="blockOut">

<div class="block" style="transform: rotate(--9deg);"></div><!--9deg 從左到右數 -135到45，一共180度-->

</div>

<div class="text">7<br>完善度</div>

</div>

<div class="blockOut0">

<div class="blockOut">

<div class="block" style="transform: rotate(9deg);"></div>

<!--從左到右讀數 -135到45，一共180度-->

</div>

<div class="text">8<br>完善度</div>

</div>

CSS:

.blockOut0 { width: 40px; height: 40px; position: relative; overflow:hidden; margin:20px auto}

.block { width: 40px; height: 40px; border-left:4px solid #f60; border-top:4px solid #f60; border-right:4px solid #ccc; border-bottom:4px solid #ccc; border-radius: 50%; box-sizing: border-box;}

.blockOut { width: 40px; height:20px; overflow: hidden;}

.text { text-align: center; top: 8px; position: absolute; width: 100%; color:#f60; font-size:9px}

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!