HTML
<div class="blockOut">
<!-- 圆 -->
<div class="block"></div>
</div>
<div class="textClass" id="textNum"></div>
CSS
.blockOut
{
position: relative;
width: 280px;
height: 120px;
overflow: hidden;
margin: 0 auto;
margin-left: 60px;
margin-top: 35px;
}
.block
{
position: absolute;
width: 280px;
height: 280px;
border-left: 35px solid #1977FF;
border-top: 35px solid #1977FF;
border-right: 35px solid #0F4295;
border-bottom: 35px solid #0F4295;
border-radius: 50%;
transform-origin: 50%;
box-sizing: border-box;
}
.textClass
{
position: absolute;
font-size: 50px;
font-weight: bold;
top: 225px;
left: 170px;
}
JS
//进度条
var progress = $('.block');
var text = $('#textNum');
var value = 22;
var angle = -135 + (value / 100) * 180;
progress.attr("style", "transform:rotate(" + angle + "deg)");
text.html(value + "%");
效果图