Remove “%” from progress bar label

Or at least, maybe you guys can use specific html tag for the %, so it can be easily hidden by css if needed. Because sometime we need to use the progress as other than percentaage, like points, degree, etc

Thanks great to hear that

That’s great!

Btw I don’t know if this is the right way to contribute. I added this CSS to make the animation a little bit smoother:

.ub_progress-bar.is-style-ub-progress-bar-circle-wrapper .ub_progress-bar-circle .ub_progress-bar-circle-path {
        transition: stroke-dashoffset 1.25s ease-out 0s, stroke-dasharray 1.75s ease-out 0s, stroke 1.75s ease-out 0s, stroke-width 1.75s ease-out .3s;
}

And experiment using this JS in the /src/blocks/progress-bar/front.build.js to delay the animation until it appear on screen:

document.addEventListener("DOMContentLoaded", function () {
  // Select all progress bar elements
  const progressBars = document.querySelectorAll(".ub_progress-bar");

  // Intersection observer options
  const options = {
    root: null, // Observe the entire viewport
    threshold: 0.5, // Consider element visible when 50% or more is in the viewport
  };

  // Create an IntersectionObserver instance
  const observer = new IntersectionObserver(function (entries) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add("ub_progress-bar-filled");
        // Detach the observer from the element after it's visible
        observer.unobserve(entry.target);
      }
    });
  }, options);

  // Observe each progress bar element
  progressBars.forEach(bar => observer.observe(bar));
});

Maybe you guys can test and implement it later. The results:

https://test.espresio.id/progress-bar-ultimate-blocks/