Как я могу создать индикатор прогресса полукругом с помощью jQuery

javascript jquery html css

3104 просмотра

1 ответ

Я хочу полукруг, как показано на моей скрипке . И индикатор выполнения должен иметь зеленый цвет.

Я новичок в 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;
}

скрипка

Автор: parish Источник Размещён: 08.11.2019 11:01

Ответы (1)


10 плюса

Решение

Используйте jQuery для .animate() stepпроизвольных значений для управления .barCSS3transform: 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 ... если вам не нужно точно контролировать шаги прогресса)

Автор: Roko C. Buljan Размещён: 20.08.2016 10:17
Вопросы из категории :
32x32