我想要一个如图所示的半圆我的小提琴 https://jsfiddle.net/ay8egkbu/3/。并且进度条需要为绿色。
我是 Jquery 新手。
HTML:
<div>
<p>100%</p>
</div>
CSS:
div {
height: 45px;
width: 90px;
border-radius: 90px 90px 0 0;
-moz-border-radius: 90px 90px 0 0;
-webkit-border-radius: 90px 90px 0 0;
border: 5px solid red;
border-bottom: none;
}
p {
text-align: center;
padding: 20px 0;
}
Fiddle https://jsfiddle.net/ay8egkbu/3/
使用 jQuery 的.animate() step任意值来控制.bar CSS3 transform: rotate
$(".progress").each(function(){
var $bar = $(this).find(".bar");
var $val = $(this).find("span");
var perc = parseInt( $val.text(), 10);
$({p:0}).animate({p:perc}, {
duration: 3000,
easing: "swing",
step: function(p) {
$bar.css({
transform: "rotate("+ (45+(p*1.8)) +"deg)", // 100%=180° so: ° = % * 1.8
// 45 is to add the needed rotation to have the green borders at the bottom
});
$val.text(p|0);
}
});
});
.progress{
position: relative;
margin: 4px;
float:left;
text-align: center;
}
.barOverflow{ /* Wraps the rotating .bar */
position: relative;
overflow: hidden; /* Comment this line to understand the trick */
width: 90px; height: 45px; /* Half circle (overflow) */
margin-bottom: -14px; /* bring the numbers up */
}
.bar{
position: absolute;
top: 0; left: 0;
width: 90px; height: 90px; /* full circle! */
border-radius: 50%;
box-sizing: border-box;
border: 5px solid #eee; /* half gray, */
border-bottom-color: #0bf; /* half azure */
border-right-color: #0bf;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress">
<div class="barOverflow">
<div class="bar"></div>
</div>
<span>10</span>%
</div>
<div class="progress">
<div class="barOverflow">
<div class="bar"></div>
</div>
<span>100</span>%
</div>
<div class="progress">
<div class="barOverflow">
<div class="bar"></div>
</div>
<span>34</span>%
</div>
<div class="progress">
<div class="barOverflow">
<div class="bar"></div>
</div>
<span>67</span>%
</div>
PS：你don't需要JS（在纯CSS3中是可行的......除非你需要精确控制进度步骤）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
