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 for suggestion, Lucapoe.

We have already added it on our to-do list. This feature will be available in the next plugin update.

Thanks great to hear that

Btw again, if I can add another suggestion on progress bar, maybe you can make the bar start to animate to fill when it appear on screen. Because what the use of the animation if user can’t see it right? Keep the great work guys!

Thanks. We will also think about this feature.

We have added the Number settings (Show Number, Number Prefix, Number Suffix) in the progress bar block.

Please check and share your feedback.

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/

Hi @lucapoe,

Thank you so much for this.

We will be sure to test and implement this in the next release.

Kind regards.