5

введите сюда описание изображения

В анимации круг заполняется полностью обводкой и меняются проценты. На определенных процентах нужно сменять запись"Анализ индекса массы тела" Чем удобнее всего такое реализовать? Может плагин какой?

2

1 ответ 1

8

Использована библиотека 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>

5
  • Спасибо, выручили, а как запустить саму функцию при нажатии на какую либо button? 3 апр 2021 в 12:44
  • Спасибо большое! Помогли очень! 3 апр 2021 в 12:54
  • Uncaught TypeError: Cannot set property 'textContent' of null at loop 3 апр 2021 в 12:59
  • А всё нашел поломку, спасибо! 3 апр 2021 в 13:02
  • @DanilGallyamshin обновил код, теперь можно не запускать самому цикл анимации, тут удобнее 3 апр 2021 в 13:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.