В анимации круг заполняется полностью обводкой и меняются проценты. На определенных процентах нужно сменять запись"Анализ индекса массы тела" Чем удобнее всего такое реализовать? Может плагин какой?
1 ответ
Использована библиотека GSAP
Логика такая: изменяется CSS переменная и отслеживается
Запуск анимации
const tl = gsap.timeline({defaults: {duration: 5, ease: 'linear'}})
.to(progressbarThumb, {'--percent': 100, onUpdate: onUpdateGsap});
onUpdate
вызывает функцию onUpdateGsap
каждый раз при цикле анимации GSAP'a.
const progressbarThumb = document.querySelector('.progressbar__thumb');
const progressbarPercent = document.querySelector('.progressbar__percent > tspan');
const progressbarText = document.querySelector('.progressbar__info > tspan');
function onUpdateGsap() {
const percent = gsap.getProperty(progressbarThumb, '--percent');
if (percent > 99) {
progressbarText.textContent = 'Закончили?';
} else if (percent > 60 && percent < 99) {
progressbarText.textContent = 'Разгоняемся!';
} else if (percent > 40 && percent < 60) {
progressbarText.textContent = 'Погнали!';
} else if (percent > 0 && percent < 40) {
progressbarText.textContent = 'Загрузочка ...'
}
progressbarPercent.textContent = Math.round(percent);
}
const tl = gsap.timeline({defaults: {duration: 5, ease: 'linear'}})
.to(progressbarThumb, {'--percent': 100, onUpdate: onUpdateGsap});
*, *::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-box: fill-box;
transform: rotate(-90deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<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>
Пример с кнопкой туда-сюда:
const progressbarThumb = document.querySelector('.progressbar__thumb');
const progressbarPercent = document.querySelector('.progressbar__percent > tspan');
const progressbarText = document.querySelector('.progressbar__info > tspan');
const btn = document.querySelector('.btn');
function onUpdateGsap() {
const percent = gsap.getProperty(progressbarThumb, '--percent');
if (percent > 99) {
progressbarText.textContent = 'Закончили?';
} else if (percent > 60 && percent < 99) {
progressbarText.textContent = 'Разгоняемся!';
} else if (percent > 40 && percent < 60) {
progressbarText.textContent = 'Погнали!';
} else if (percent > 0 && percent < 40) {
progressbarText.textContent = 'Загрузочка ...'
}
progressbarPercent.textContent = Math.round(percent);
}
const tl = gsap.timeline({defaults: {duration: 5, ease: 'linear'}})
.to(progressbarThumb, {'--percent': 100, onUpdate: onUpdateGsap});
tl.paused(true);
btn.addEventListener('click', (e) => {
if (btn.classList.contains('active')) {
btn.classList.remove('active');
tl.reverse();
} else {
btn.classList.add('active');
tl.play();
}
});
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: sans-serif;
}
.progressbar {
max-width: 150px;
font-size: 10px;
display: block;
--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-box: fill-box;
transform: rotate(-90deg);
}
.btn {
--color1: black;
--color2: white;
display: inline-block;
background-color: var(--color2);
color: var(--color1);
padding: 5px 8px;
margin: 20px 0 0 20px;
font-size: 18px;
user-select: none;
cursor: pointer;
border: 2px solid var(--color1);
transition-duration: 0.2s;
transition-timing-function: ease;
transition-property: border-color, background-color, color;
}
.btn.active {
--color1: white;
--color2: black;
border-color: var(--color2);
}
<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>
<div class="btn">Туда-сюда</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
Пример только туда:
const progressbarThumb = document.querySelector('.progressbar__thumb');
const progressbarPercent = document.querySelector('.progressbar__percent > tspan');
const progressbarText = document.querySelector('.progressbar__info > tspan');
const btn = document.querySelector('.btn');
function onUpdateGsap() {
const percent = gsap.getProperty(progressbarThumb, '--percent');
if (percent > 99) {
progressbarText.textContent = 'Закончили?';
} else if (percent > 60 && percent < 99) {
progressbarText.textContent = 'Разгоняемся!';
} else if (percent > 40 && percent < 60) {
progressbarText.textContent = 'Погнали!';
} else if (percent > 0 && percent < 40) {
progressbarText.textContent = 'Загрузочка ...'
}
progressbarPercent.textContent = Math.round(percent);
}
const tl = gsap.timeline({defaults: {duration: 5, ease: 'linear'}})
.to(progressbarThumb, {'--percent': 100, onUpdate: onUpdateGsap});
tl.paused(true);
btn.addEventListener('click', (e) => {
if (!btn.classList.contains('active')) {
btn.classList.add('active');
tl.play();
}
});
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: sans-serif;
}
.progressbar {
max-width: 150px;
font-size: 10px;
display: block;
--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-box: fill-box;
transform: rotate(-90deg);
}
.btn {
--color1: black;
--color2: white;
display: inline-block;
background-color: var(--color2);
color: var(--color1);
padding: 5px 8px;
margin: 20px 0 0 20px;
font-size: 18px;
user-select: none;
cursor: pointer;
border: 2px solid var(--color1);
transition-duration: 0.2s;
transition-timing-function: ease;
transition-property: border-color, background-color, color;
}
.btn.active {
--color1: white;
--color2: black;
border-color: var(--color2);
}
<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>
<div class="btn">Туда</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
-
Спасибо, выручили, а как запустить саму функцию при нажатии на какую либо button? Commented 3 апр. 2021 в 12:44
-
-
Uncaught TypeError: Cannot set property 'textContent' of null at loop Commented 3 апр. 2021 в 12:59
-
-
@DanilGallyamshin обновил код, теперь можно не запускать самому цикл анимации, тут удобнее Commented 3 апр. 2021 в 13:47