css 环形进度条（纯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}

,