Как исправить прогресс бар?

Question

[Максим Комаров]

Здравствуйте, нашёл код, вставил себе, но происходит такая картина:



А надо чтобы было также:



В чём проблема?

Код HTML:

<svg class="progress-ring" width="150" height="150">
					<circle class="progress-bar__background" cx="70" cy="70" r="50"></circle>
					<circle class="progress-bar__progress js-progress-bar" cx="70" cy="70" r="50"></circle>
				</svg>

Код CSS:

svg {
	transform: rotate(-90deg);
}

.progress-bar__background {
	fill: none;
	stroke: #555f6d;
	stroke-width: 14;
}
  
.progress-bar__progress {
	fill: none;
	stroke: #555f6d;
	stroke: #f47cff;
	stroke-dasharray: 100 100;
	stroke-dashoffset: 100;
	stroke-linecap: round;
	stroke-width: 14;
	transition: stroke-dashoffset 1s ease-in-out;
}

Код JS:

var percentageComplete = 0.2;
var strokeDashOffsetValue = 100 - (percentageComplete * 100);
var progressBar = $(".js-progress-bar");
progressBar.css("stroke-dashoffset", strokeDashOffsetValue);

Comments

[Ankhena]

Почитать про stroke-dasharray и stroke-dashoffset и привести svg к размеру длины окружности 100.