如何使用jQuery创建半圆进度条 [英] How can I create semicircle progress bar with jQuery

问题描述

我想要一个半圈，就像在我的小提琴中所示。进度条需要有绿色。

我是Jquery的新手。

HTML：

 < div> 
< p> 100％< / p> 
< / div> 
  

CSS：

  div {
身高：45px; 
宽度：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; 
填充：20px 0; 
} 
  

小提琴

解决方案

使用jQuery的 .animate（） 步骤对任意值进行控制 .bar CSS3 转换：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：旋转（+（45 +（p * 1.8））+deg），// 100％= 180°所以：°=％* 1.8 // 45是添加所需的旋转以使绿色边框位于底部}; $ $ val.text（p | 0）;}}）;}）;  

  .progress {position：relative;保证金：4px;向左飘浮; text-align：center;}。barOverflow {/ *包装旋转.bar * / position：relative;溢出：隐藏; / *注释这一行来理解技巧* / width：90px;身高：45px; / *半圈（溢出）* / margin-bottom：-14px; / *带上数字* /}。bar {position：absolute;顶部：0;左：0;宽度：90px;身高：90px; /* 完整的循环！ * / border-radius：50％; box-sizing：border-box; border：5px solid #eee; / *半灰，* / border-bottom-color：＃0bf; / *半天蓝色* / 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中是可行的......除非你需要精确控制进度步骤）

I want a half circle like that's shown in my fiddle. And the progress bar needs to have green color.

I am new to 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

解决方案

Use jQuery's .animate() step on arbitrary values to control the .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>

P.S: You don't need JS (it's doable in pure CSS3... unless you need to precisely control the progress steps)

这篇关于如何使用jQuery创建半圆进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！