Показать сообщение отдельно
  #6 (permalink)  
Старый 28.01.2024, 14:11
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

let barProducts = document.querySelector(".bar__products"),
	productsCount = document.querySelector(".bar__value-products"),
	barClients = document.querySelector(".bar__clients"),
	clientsCount = document.querySelector(".bar__clients-value");

let productsStartValue = 0,
	productsEndValue = 95,
	clientsStartValue = 0,
	clientsEndValue = 85,
	speed = 10;

const startProgress = () => {
  let productsInterval = setInterval(() => {
    productsStartValue++;

    productsCount.innerHTML = `${productsStartValue}%`;
    barProducts.style.background = `conic-gradient(#40DDB6 ${productsStartValue * 3.7}deg, #37393F 0deg)`;

    if (productsStartValue == productsEndValue) {
      clearInterval(productsInterval);
    }
  }, speed);

  let clientsInterval = setInterval(() => {
    clientsStartValue++;

    clientsCount.innerHTML = `${clientsStartValue}%`;
    barClients.style.background = `conic-gradient(#40DDB6 ${clientsStartValue * 3.6}deg, #37393F 0deg)`;

    if (clientsStartValue == clientsEndValue) {
      clearInterval(clientsInterval);
    }
  }, speed);
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
            // сработает когда элемент будет виден на 90%
            observer.disconnect();
            startProgress();
        }
    });
}, {
   root: null, // используется viewport, для отслеживания в пределах другого элемента укажите его здесь
   rootMargin: '0px', // маржа вокруг root
   threshold: 0.9, // пороговое значение видимости (90% элемента)
});

observer.observe(document.querySelector('.progress-bar__wrap'));


Вот так должно работать

Последний раз редактировалось ruslan_mart, 28.01.2024 в 14:13.
Ответить с цитированием