Написал скрипт, для круглого прогресс бара с помощью SVG
, на чистом js
.
Но не учел тот факт, что мне нужно еще и текст внутри этого круга сделать. Поискал в инете, и не нашел.
А вот сделать с обычными div'ами у меня не получается. Не получается начинать прогресс с определенной точки и заканчивать соответственно тоже в определенной точке.
Вот мой код, который с svg:
function setProgress(percent) {
const circle = document.getElementById(`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 / 10 * circumference;
circle.style.strokeDashoffset = offset;
}
setProgress(7);
.svg_circle_loader {
background: none;
border: none;
margin: none;
padding: none;
}
.circle_loader {
fill: none;
stroke: #FFB10A;
stroke-width: 10px;
transition: all 0.2s linear;
transform-origin: center;
transform: rotate(-90deg);
transition: stroke-dashoffset .5s;
}
<svg class="svg_circle_loader" width="200" height="200">
<circle cx="100" cy="100" r="50" class="circle_loader" id="circle"></circle> <!-- #74563F -->
</svg>