سورس کد نوار پیشرفت گروهی (نوار مهارت) با data-percent و انیمیشن اسکرول

<div class="skills">
  <div class="skill" data-percent="92">
    <div class="skill-head"><span>طراحی رابط کاربری</span><b>0%</b></div>
    <div class="skill-track"><div class="skill-fill"></div></div>
  </div>

  <div class="skill" data-percent="74">
    <div class="skill-head"><span>سئو تکنیکال</span><b>0%</b></div>
    <div class="skill-track"><div class="skill-fill"></div></div>
  </div>
  <!-- برای نوار جدید، یک بلوک .skill دیگر اضافه کنید -->
</div>

.skills { display: grid; gap: 18px; max-width: 560px; }

.skill-head {
  display: flex; justify-content: space-between;
  font-weight: 700; margin-bottom: 6px;
}
.skill-track {
  height: 12px;
  background: #EDE4FA;
  border-radius: 20px;
  overflow: hidden;
}
.skill-fill {
  height: 100%; width: 0;
  border-radius: 20px;
  background: linear-gradient(90deg, #C9A3F5, #8224E3, #5F01AF);
  transition: width 1.4s cubic-bezier(.2,.8,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  .skill-fill { transition: none; }
}

const box = document.querySelector('.skills');
const skills = box.querySelectorAll('.skill');
const DURATION = 1400;

function countUp(el, target) {
  let start = null;
  function step(ts) {
    if (!start) start = ts;
    const k = Math.min(1, (ts - start) / DURATION);
    const eased = 1 - Math.pow(1 - k, 3);   // easeOutCubic
    el.textContent = Math.round(target * eased) + '%';
    if (k < 1) requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}

function fillAll() {
  skills.forEach((s, i) => {
    const p = Number(s.dataset.percent);
    setTimeout(() => {                       // پر شدن پله‌ای
      s.querySelector('.skill-fill').style.width = p + '%';
      countUp(s.querySelector('b'), p);
    }, i * 150);
  });
}

const io = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    fillAll();
    io.disconnect();
  }
}, { threshold: 0.4 });

io.observe(box);