<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<style>
.wrapper {
overflow: clip;
min-height: 100%;
display: flex;
flex-direction: column;
}
.wrapper > main {
flex-grow: 1;
}
.main {
font-family: "Poppins", sans-serif;
color: #fff;
background-color: #37393f;
}
/* !Убрать после тестов*/
.main__section {
padding-top: 1200px;
margin-bottom: 1250px;
}
h3{
text-align: center;
}
h3:not(:last-child){
margin-bottom: 20px;
}
/* !Убрать после тестов */
.main__section > *:not(:last-child) {
margin-bottom: 150px;
}
/* ?Вариант #1 (Progress Bar) */
.progress-bar__block-bar {
max-width: 640px;
margin: 0 auto;
padding: 0 15px;
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.block-bar__clients,
.block-bar__project {
background-color: #2e2f34;
padding: 27px 30px;
flex: 1 1 auto;
}
.clients-bar__wrap,
.project-bar__wrap {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.clients-bar__circular,
.project-bar__circular {
position: relative;
width: 80px;
height: 80px;
border-radius: 50%;
background: conic-gradient(#40ddb6 3.7deg, #37393f 0deg);
display: flex;
align-items: center;
justify-content: center;
}
.clients-bar__circular::before,
.project-bar__circular::before {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 70px;
height: 70px;
border-radius: 50%;
background: #37393f;
}
.clients-bar__value,
.project-bar__value {
font-size: 20px;
font-weight: 600;
line-height: 0.8;
z-index: 2;
}
.text-block__paragraph {
text-transform: capitalize;
font-family: "Inter", sans-serif;
line-height: 1.4;
}
.text-block__paragraph:not(:last-child) {
margin-bottom: 1px;
}
.text-block__subtitle {
text-transform: capitalize;
font-size: 18px;
font-weight: 600;
line-height: 0.9;
}
[class*="-bar__value"] {
font-family: "Poppins", sans-serif;
font-size: 20px;
font-weight: 600;
line-height: 0.8;
}
/* !Вариант #1 (Progress Bar) */
/* ?Вариант #2 (Progress Bar) */
.circular-bar__block {
max-width: 640px;
margin: 0 auto;
padding: 0 15px;
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.decs__paragraph {
text-transform: capitalize;
font-family: "Inter", sans-serif;
line-height: 1.4;
}
.decs__subcaption {
text-transform: capitalize;
font-size: 18px;
font-weight: 600;
line-height: 0.9;
}
.block-circular__products-inner,
.block-circular__clients-inner {
background-color: #2e2f34;
padding: 27px 28px;
display: flex;
gap: 15px;
flex-wrap: wrap;
align-items: center;
}
.bar-products__outer-item,
.bar-clients__outer-item {
height: 80px;
width: 80px;
border-radius: 50%;
background-color: #37393f;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.bar-products__inner-item,
.bar-clients__inner-item {
position: absolute;
top: 4px;
left: 4px;
height: 70px;
width: 70px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
#bar-products__value,
#bar-clients__value {
font-size: 20px;
font-weight: 600;
line-height: 0.8;
z-index: 2;
}
.circular-bar__anim.circular-bar__products.circular-bar__active {
fill: #37393F;
stroke: #40ddb6;
stroke-width: 5px;
stroke-dasharray: 226; /* параметр для создания полноценной окружности */
stroke-dashoffset: 226; /* параметр для начальной точки отсчета */
animation: sircle-products 1s linear forwards;
}
.circular-bar__anim.circular-bar__clients.circular-bar__active {
fill: #37393F;
stroke: #40ddb6;
stroke-width: 5px;
stroke-dasharray: 226; /* параметр для создания полноценной окружности */
stroke-dashoffset: 226; /* параметр для начальной точки отсчета */
animation: sircle-clients 1s linear forwards;
}
.circular-bar__products, .circular-bar__clients {
transform: rotate(-84deg);
}
@keyframes sircle-products {
100% {
stroke-dashoffset: 11;
}
}
@keyframes sircle-clients {
100% {
stroke-dashoffset: 20;
}
}
</style>
</head>
<body>
<div class="wrapper">
<header class="header">
<div class="header__section section">
</div>
</header>
<main class="main">
<div class="main__section section">
<!-- ?Вариант #1 -->
<div class="progress-bar">
<h3>Вариант #1</h3>
<div class="progress-bar__block-bar block-bar">
<div class="block-bar__clients clients-bar">
<div class="clients-bar__wrap">
<div class="clients-bar__circular">
<span class="clients-bar__value">95%</span>
</div>
<div class="clients-bar__text-block text-block">
<div class="text-block__paragraph">clients</div>
<h4 class="text-block__subtitle">quick response</h4>
</div>
</div>
</div>
<div class="block-bar__project project-bar">
<div class="project-bar__wrap">
<div class="project-bar__circular">
<span class="project-bar__value">85%</span>
</div>
<div class="products-bar__text-block text-block">
<div class="text-block__paragraph">project</div>
<h4 class="text-block__subtitle">finished jobs</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="footer__section section"></div>
</footer>
</div>
<script>
let barProducts = document.querySelector(".clients-bar__circular"),
productsCount = document.querySelector(".clients-bar__value"),
barClients = document.querySelector(".project-bar__circular"),
clientsCount = document.querySelector(".project-bar__value");
let productsStart = 0,
productsEndValue = 95,
clientsStartValue = 0,
clientsEndValue = 85;
let productsInterval = false;
let clientsInterval = false;
const COUNT_TIME = 5000;
const startProgress = (timeCount) => {
const endValues = [95, 85];
const elementsBar = [barProducts, barClients];
const elementsCount = [productsCount, clientsCount];
const timeStart = performance.now();
function show (currentTime) {
let part = (currentTime - timeStart) / timeCount;
if (part > 1) part = 1;
for (let i = 0; i < endValues.length; i++) {
const percent = Math.round( part * endValues[i]);
const degree = part * endValues[i] * 3.6;
elementsBar[i].style.background = `conic-gradient(#40DDB6 ${degree}deg, #37393F 0deg)`;
elementsCount[i].innerHTML = `${percent}%`;
}
if (part < 1) requestAnimationFrame(show);
}
requestAnimationFrame(show);
}
//TODO Вариант #1 (Progress Bar) - скролл страницы
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
startProgress(COUNT_TIME);
}
});
},
{
root: null,
rootMargin: "0px",
threshold: 0.9,
}
);
observer.observe(document.querySelector(".progress-bar__block-bar"));
</script>
</body>
</html>
