ruslan_mart,
Могли бы помочь с таким вариантом чтобы срабатывало при скроле:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/style.css">
<title>lesson_#</title>
</head>
<body>
<div class="wrapper">
<header class="header">
<div class="header__section section">
</div>
</header>
<main class="main">
<div class="main__section section">
<!-- ?Вариант #2 -->
<div class="circular-bar">
<div class="circular-bar__block block-circular">
<div class="block-circular__products-inner bar-products">
<div class="bar-products__body">
<div class="bar-products__outer-item">
<div class="bar-products__inner-item">
<div id="bar-products__value">95%</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
<circle cx="40" cy="40" r="36" stroke-linecap="round" />
</svg>
</div>
</div>
<div class="bar-products__desc decs">
<div class="decs__paragraph">clients</div>
<div class="decs__subcaption">quick response</div>
</div>
</div>
<div class="block-circular__clients-inner bar-clients">
<div class="bar-clients__body">
<div class="bar-clients__outer-item">
<div class="bar-clients__inner-item">
<div id="bar-clients__value">85%</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
<circle cx="40" cy="40" r="36" stroke-linecap="round" />
</svg>
</div>
</div>
<div class="bar-clients__desc decs">
<div class="decs__paragraph">project</div>
<div class="decs__subcaption">finished jobs</div>
</div>
</div>
</div>
</div>
<!-- !Вариант #2 -->
</div>
</main>
<footer class="footer">
<div class="footer__section section"></div>
</footer>
</div>
<script src="js/script.js"></script>
</body>
</html>
let numberProducts = document.getElementById("bar-products__value");
let numberClients = document.getElementById("bar-clients__value");
let counterProducts = 0;
let counterClients = 0;
setInterval(() => {
if (counterProducts == 95) {
clearInterval();
} else {
counterProducts += 1;
numberProducts.innerHTML = counterProducts + "%";
}
}, 10);
setInterval(() => {
if (counterClients == 85) {
clearInterval();
} else {
counterClients += 1;
numberClients.innerHTML = counterClients + "%";
}
}, 10);