當前位置：
首頁 >
[CSS3]环形进度条
發布時間：2025/7/14
50
豆豆
生活随笔
收集整理的這篇文章主要介紹了
[CSS3]环形进度条
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
來源：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)'); });?
轉載于:https://www.cnblogs.com/hcbin/p/9821013.html
總結
以上是生活随笔為你收集整理的[CSS3]环形进度条的全部內容，希望文章能夠幫你解決所遇到的問題。
