來源：https://codepen.io/eZ0/pen/eZXNzd

點擊上面鏈接有源碼有示例。

?

.ko-progress-circle {width: 120px;height: 120px;background-color: #d9d9d9;border-radius: 50% }.ko-progress-circle .ko-progress-circle__slice, .ko-progress-circle .ko-progress-circle__fill {width: 120px;height: 120px;position: absolute;-webkit-backface-visibility: hidden;transition: transform 1s;border-radius: 50% }.ko-progress-circle .ko-progress-circle__slice {clip: rect(0px,120px,120px,60px) }.ko-progress-circle .ko-progress-circle__slice .ko-progress-circle__fill {clip: rect(0px,60px,120px,0px);background-color: #1291d4 }.ko-progress-circle .ko-progress-circle__overlay {width: 105px;height: 105px;position: absolute;margin: 7.5px;background-color: #fbfbfb;border-radius: 50% }

?

<div class="ko-progress-circle" data-progress="30"><div class="ko-circle"><div class="full ko-progress-circle__slice"><div class="ko-progress-circle__fill"></div></div><div class="ko-progress-circle__slice"><div class="ko-progress-circle__fill"></div><div class="ko-progress-circle__fill ko-progress-circle__bar"></div></div></div><div class="ko-progress-circle__overlay"></div> </div>

?

$('.ko-progress-circle').each(function(index, element) {var progress = $(this).data('progress');var degree = parseInt(progress) * 1.8;$(this).find('.ko-progress-circle__slice.full,.ko-progress-circle__fill').css('transform', 'rotate(' + degree + 'deg)');$(this).find('.ko-progress-circle__fill.ko-progress-circle__bar').css('transform', 'rotate(' + (degree * 2) + 'deg)'); });

?

轉(zhuǎn)載于:https://www.cnblogs.com/hcbin/p/9821013.html

總結(jié)

以上是生活随笔為你收集整理的[CSS3]环形进度条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。