Цикл выполнения процентных ставок

Ответ 1

Учитывая форму индикатора выполнения (округленный конец/старт), я бы предложил использовать SVG.

DEMO: Радиальный индикатор выполнения

В следующем примере прогресс анимируется с помощью атрибута stroke-dasarray, а числа% увеличиваются с помощью jQuery:

var count = $(('#count'));
$({ Counter: 0 }).animate({ Counter: count.text() }, {
  duration: 5000,
  easing: 'linear',
  step: function () {
    count.text(Math.ceil(this.Counter)+ "%");
  }
});

body{text-align:center;font-family: 'Open Sans', sans-serif;}
svg{width:30%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="animated" viewbox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="#FDB900"/>
  <path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff"
        stroke-dasharray="251.2,0"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80">
    <animate attributeName="stroke-dasharray" from="0,251.2" to="251.2,0" dur="5s"/>           
  </path>
  <text id="count" x="50" y="50" text-anchor="middle" dy="7" font-size="20">100%</text>
</svg>

Ответ 2

Чистое решение HTML/CSS

Короче говоря, я использовал свойства CSS border-radius и z-index для создания белого полукруга, расположенного под оранжевым центральным кругом и оранжевым внешним кольцом. Первоначально полукруг полностью скрывается за дополнительным слоем апельсина с левой стороны, но его внешний край постепенно открывается, когда он вращается вокруг центральной оси (через CSS transform: rotate()), создавая появление индикатора выполнения. Дополнительный обман требуется, когда индикатор прогресса проходит половину (см. Ниже фрагмент для получения дополнительной информации).

Все это было сделано с использованием чистого HTML и CSS, за исключением анимации, которая использует JavaScript. Возможно, для этого требуется больше кода, чем решения на основе SVG, но разметка на самом деле намного проще, что делает его хорошей альтернативой, на мой взгляд.

function setProgress(elem, percent) {
  var
    degrees = percent * 3.6,
    transform = /MSIE 9/.test(navigator.userAgent) ? 'msTransform' : 'transform';
  elem.querySelector('.counter').setAttribute('data-percent', Math.round(percent));
  elem.querySelector('.progressEnd').style[transform] = 'rotate(' + degrees + 'deg)';
  elem.querySelector('.progress').style[transform] = 'rotate(' + degrees + 'deg)';
  if(percent >= 50 && !/(^|\s)fiftyPlus(\s|$)/.test(elem.className))
    elem.className += ' fiftyPlus';
}

(function() {
  var
    elem = document.querySelector('.circlePercent'),
    percent = 0;
  (function animate() {
    setProgress(elem, (percent += .25));
    if(percent < 100)
      setTimeout(animate, 15);
  })();
})();

.circlePercent {
  position: relative;
  top: 26px;
  left: 26px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: orange;
}
.circlePercent:before,
.circlePercent > .progressEnd {
  position: absolute;
  z-index: 3;
  top: 2px;
  left: 45px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
  -ms-transform-origin: 3px 46px;
  transform-origin: 3px 46px;
  content: "";
}
.circlePercent:after,
.circlePercent > .progress {
  position: absolute;
  -ms-transform-origin: 48px 48px;
  transform-origin: 48px 48px;
  z-index: 0;
  top: 0;
  left: 0;
  width: 48px;
  height: 96px;
  border-radius: 48px 0 0 48px;
  background: orange;
  content: "";
}
.circlePercent.fiftyPlus:after {
  background: white;
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.circlePercent > .progress.progress {
  background: white;
}
.circlePercent > .counter {
  position: absolute;
  box-sizing: border-box;
  z-index: 2;
  width: 100px;
  height: 100px;
  margin-top: -2px;
  margin-left: -2px;
  border-radius: 50%;
  border: 4px solid orange;
}
.circlePercent > .counter:before {
  position: absolute;
  z-index: 1;
  top: 50%;
  margin-top: -13px;
  width: 100%;
  height: 26px;
  font-size: 26px;
  line-height: 26px;
  font-family: sans-serif;
  text-align: center;
  color: white;
  content: attr(data-percent) "%";
}
.circlePercent > .counter:after {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 6px;
  left: 6px;
  border-radius: 50%;
  background: orange;
  content: "";
}
.circlePercent > .counter[data-percent="100"] {
  background: white;
}

<div class="circlePercent">
  <div class="counter" data-percent="0"></div>
  <div class="progress"></div>
  <div class="progressEnd"></div>
</div>

Ответ 3

Демо: CODEPEN

Вот моя попытка получить индикатор процентного круга:

Путь рисует две дуги, и я устанавливаю штрих-дашара. нам действительно не нужно устанавливать dasharray, поскольку мы установили это позже с javascript.

Html

<svg class="circles" viewbox="0 0 200 200">
  <g id="first">
    <circle r="50" cx="100" cy="100" fill="#fb0"/>
    <path fill="none" 
          stroke-linecap="round"
          stroke-width="7" 
          stroke="#ffa"
          stroke-dasharray="250,250"
          d="M100 60 
             A1 1 0 0 1 100 140
             A1 1 0 0 1 100 60"/>
    <text class="circ-text"
          text-anchor="middle"
          x="100" y="100"
          font-size="12px"
          fill="#ffa"
          >percentage
    </text>
  </g>
</svg>

Javascirpt

• Получить путь с помощью #first path.
• Получить длину тире-массива: path.getTotalLength();
• Увеличьте массив тире до его полного: setAttribute('stroke-dasharray', i+","+length); Где я увеличен.
• Узнайте, в каком проценте мы находимся: (count++/ticks)*100
• добавьте процент к тексту svg: text.innerHTML=(count/tick)*100

var path = document.querySelector('#first path');
var text = document.querySelector('#first .circ-text');
var length = path.getTotalLength();
var i = 0;
var count = 0;
var ticks = 50;
setInterval(function() {
  if (i < length+length/ticks) {
    path.setAttribute('stroke-dasharray', i+","+length);
    i+=length/ticks;
    text.innerHTML=Math.round((count++/ticks)*100);
  }

}, 100);

var path = document.querySelector('#first path');
var text = document.querySelector('#first .circ-text');
var length = path.getTotalLength();
var i = 0;
var count = 0;
var ticks = 50;
setInterval(function() {
  if (i < length+length/ticks) {
  	path.setAttribute('stroke-dasharray', i+","+length);
    i+=length/ticks;
    text.innerHTML=Math.round((count++/ticks)*100);
  }
  
}, 100);

<svg class="circles" viewbox="0 0 500 200">
  <g id="first">
    <circle r="50" cx="100" cy="100" fill="#fb0" />
    <path fill="none" stroke-linecap="round" stroke-width="7" stroke="#ffa" stroke-dasharray="250,250" d="M100 60 A1 1 0 0 1 100 140
       A1 1 0 0 1 100 60" />
    <text class="circ-text" text-anchor="middle" x="100" y="100" font-size="12px" fill="#ffa">percentage</text>
  </g>

Ответ 4

Вы пробовали это?

<percent-display percent="75" side="" colors=""></percent-display>

Источник: http://angularscript.com/angularjs-round-percentage-bar-directive-ngpercentdisplay/

Ответ 5

Циркуляр Процент Полоса хода с использованием Canvas...

var ctx = document.getElementById('circularLoader').getContext('2d');
var al = 0;
var start = 4.72;
var cw = ctx.canvas.width;
var ch = ctx.canvas.height; 
var diff;
function progressSim(){
	diff = ((al / 100) * Math.PI*2*10).toFixed(2);
	ctx.clearRect(0, 0, cw, ch);
	ctx.lineWidth = 17;
	ctx.fillStyle = '#4285f4';
	ctx.strokeStyle = "#4285f4";
	ctx.textAlign = "center";
	ctx.font="28px monospace";
	ctx.fillText(al+'%', cw*.52, ch*.5+5, cw+12);
	ctx.beginPath();
	ctx.arc(100, 100, 75, start, diff/10+start, false);
	ctx.stroke();
	if(al >= 100){
		clearTimeout(sim);
	    // Add scripting here that will run when progress completes
	}
	al++;
}
var sim = setInterval(progressSim, 50);

<div id="loader">
	<canvas id="circularLoader" width="200" height="200"></canvas>
</div>