如何使用jQuery創建半圓進度條

Question

我想要一個半圈，如my fiddle所示。進度條需要有綠色。

我是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

Answer 1

使用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：你不需要JS（它在純CSS3可行的......除非你需要精確控制進步的階梯）