Анимация прогресс-бара

#javascript #css3 #html5 #svg #svg_animation

Я пытаюсь сделать анимацию прогресс-бара
https://codepen.io/mihail-kamahin/pen/YzKZjWd

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


Но у меня не получается, я пытался ещё один круг создавать, поверх уже созданного,
но получается какая-то каша. Кто уже работал с кругами на svg, возможно, знаете, как
это сделать?



function setProgress(percent, selector__circle) {
	const circle = document.querySelector(`${selector__circle}`);
	const radius = circle.r.baseVal.value;
	const circumference = 2 * Math.PI * radius;

	circle.style.strokeDasharray = `${circumference} ${circumference}`;
	circle.style.strokeDashoffset = circumference;

	const offset = circumference - percent / 100 * circumference;
	circle.style.strokeDashoffset = offset;
}

var number = 125;

setProgress(number, '.progressbar__thumb');

click__me = document.querySelector('.click__me');

click__me.addEventListener('click', function() {
  setProgress(number += 25, '.progressbar__thumb');
});
.progress__container {
	width: 140px;
	height: 140px;
}

.progressbar__track {
	fill: transparent;
	stroke: #3E4153;
	stroke-width: 3px;
}

.progressbar__thumb{
	fill: transparent;
	stroke: yellow;
	stroke-width: 4px;
	transform: rotate(270deg);
	transform-origin: center;
	transition: 0.5s linear;
}

.click__me {
  margin-top: 30px;
  margin-left: 30px;
}

  






    

Ответы

Ответ 1

Все можно сделать за счет одного лишь stroke-dasharray, корректно посчитав длины:



function setProgress(percent, selector__circle) {
  const circle = document.querySelector(selector__circle);
  const total = Math.PI * circle.r.baseVal.value;
  circle.style.strokeDasharray = `${total*percent} ${total*(1-percent)*2}`;
  document.querySelector('svg text').innerHTML = (percent*100).toFixed(0) + '%';
}

var number = 0;

setProgress(number, '.progressbar__thumb');

document.querySelector('.click__me').addEventListener('click', function() {
  setProgress(number = number+0.1 > 1 ? 0 : number+0.1, '.progressbar__thumb');
});
.progress__container {
	width: 140px;
	height: 140px;
}

.progressbar__track {
	fill: transparent;
	stroke: #3E4153;
	stroke-width: 3px;
}

.progressbar__thumb {
  transform:
    translate(32px,32px)
    rotate(180deg)
    translate(-32px,-32px);
	fill: transparent;
	stroke: yellow;
	stroke-width: 4px;
	transition: 0.2s;
}

.click__me {
  margin-top: 10px;
  margin-left: 35px;
}

  





Ответ 2

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

   

Расчет цифр в атрибуте stroke-dasharray  

При радиусе окружности r="100" длина окружности равна C= 2 * PI * R = 628,3  

Половина окружности равна 314,15  

Анимация линии достигается с помощью увеличения черты от нуля до максимума - 628,3   

У атрибута stroke-dasharray первый параметр это длина черты, второй параметр это
длина пробела, поэтому:

Чтобы получить в начале нулевую длину черты записываем:
 stroke-dasharray="0 314.15 0 314.15"      

Длина черты 0 длина пробела -314.15  длина черты 0 длина пробела -314.15,  в итоге
линию не будет видно.  

Для максимального значения видимости линии нужно убрать пробелы :   

stroke-dasharray=0 0 628.3 0  

Для анимации линии записываем в values эти два значения stroke-dasharray 

values="0 314.15 0 314.15;0 0 628.3 0"



var btn = document.getElementById('btn');
var anim = document.getElementById('an');
btn.onclick = function () {
      anim.beginElement();
}

	 


   

Ещё пример основанный на этой технике



.container
{
width:50%;
height:50%;  
 background:black;
}