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? Commented 3 апр. 2021 в 12:44
  • Спасибо большое! Помогли очень! Commented 3 апр. 2021 в 12:54
  • Uncaught TypeError: Cannot set property 'textContent' of null at loop Commented 3 апр. 2021 в 12:59
  • А всё нашел поломку, спасибо! Commented 3 апр. 2021 в 13:02
  • @DanilGallyamshin обновил код, теперь можно не запускать самому цикл анимации, тут удобнее Commented 3 апр. 2021 в 13:47

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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