我想旋转圆,使圆.progressbar__thumb
上的线从不同的位置移动。但是出了点问题。告诉我怎么右转?
const progressbarThumb = document.querySelector('.progressbar__thumb');
const progressbarPercent = document.querySelector('.progressbar__percent > tspan');
const progressbarText = document.querySelector('.progressbar__info > tspan');
let frameLoop = null;
function onCompleteGsap() {
cancelAnimationFrame(frameLoop);
}
gsap.to(progressbarThumb, 5, {
'--percent': 50,
onComplete: onCompleteGsap,
ease: 'linear'
});
function loop() {
const percent = gsap.getProperty(progressbarThumb, '--percent');
if (percent > 99) {
progressbarText.textContent = 'Закончили?';
} else if (percent > 60) {
progressbarText.textContent = 'Разгоняемся!';
} else if (percent > 40) {
progressbarText.textContent = 'Погнали!';
}
progressbarPercent.textContent = Math.round(percent);
frameLoop = requestAnimationFrame(loop);
}
frameLoop = requestAnimationFrame(loop);
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
}
.progressbar {
max-width: 150px;
font-size: 10px;
--color: rgb(0, 186, 16);
--percent: 0; /* процент, насколько заполнен круг */
--PI: 3.141592;
--r: 30;
--strokeWidth: 2;
--total: calc( var(--PI) * var(--r));
}
.progressbar circle {
r: var(--r);
}
.progressbar text {
fill: var(--color);
}
.progressbar__percent {
font-size: 16px;
}
.progressbar__track {
fill: transparent;
stroke: #ededed;
stroke-width: var(--strokeWidth);
}
.progressbar__thumb {
fill: transparent;
--strokeDasharray: calc(2 * var(--total) * var(--percent) / 100) calc(2 * var(--total));
stroke-linecap: round;
stroke-dasharray: var(--strokeDasharray);
stroke: var(--color);
stroke-width: var(--strokeWidth);
transform-origin: center;
transform: rotate(90deg);
}
<svg class="progressbar" viewBox="0 0 62 80">
<circle class="progressbar__track" cx="31" cy="31"></circle>
<circle class="progressbar__thumb" cx="31" cy="31"></circle>
<text x="32" y="33" class="progressbar__percent" text-anchor="middle" dominant-baseline="middle"><tspan>0</tspan>%</text>
<text x="32" y="73" class="progressbar__info" text-anchor="middle" dominant-baseline="middle"><tspan>Загрузочка ...</tspan></text>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
transform-origin: 50% 50%;
transform-box
带有值的属性,fill-box
以便计算相对于元素的百分比。