Circular progress bar

1

How to put a circular progress bar on funnelish?

2

Hey @Julie_Ann_Alimario :waving_hand:

Here’s the animated circular progress bar that starts only when the user scrolls to it — works great in Funnelish custom HTML block :backhand_index_pointing_down:

<div class="circle">
  <div class="text">0%</div>
</div>

<style>
.circle {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(#2bb24c 0deg, #eee 0deg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 60px auto;
}
.text {
  position: absolute;
  font-size: 20px;
  font-weight: bold;
}
</style>

<script>
const circle = document.querySelector('.circle');
const text = document.querySelector('.text');
let started = false;

function startProgress() {
  let progress = 0;
  const update = setInterval(() => {
    progress++;
    text.textContent = progress + '%';
    circle.style.background = `conic-gradient(#2bb24c ${progress * 3.6}deg, #eee 0deg)`;
    if (progress >= 75) clearInterval(update); // stop at 75%
  }, 30);
}

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting && !started) {
      started = true;
      startProgress();
    }
  });
}, { threshold: 0.5 });

observer.observe(circle);
</script>

:white_check_mark: How it works:

  • The animation begins only when 50% of the circle is visible on screen.
  • It fills up smoothly to 75% (you can change that number).
  • You can duplicate this block for multiple animated progress bars.