Animated number counter - how to make it count in small numbers with decimals?

Ask the community
1

Hi,
I’m coding an animated number counter. I just dont know how to make it count with decimals from like 0.00% to like 10.2%. I figured out how it could count without decimals from 0 to whatever and then end with the desired decimal, but I want to see it count decimals aswell. I have no idea what code to add to make this work.

My quick fix has been to code like it is in the 1,000’s by using danish number standard which makes the comma into a dot, but using this way would always have me forced to have 3 decimals if I want it to count decimals. I don’t see this sustainable as the numbers go from single digit percentages to double or triple digit. I would prefer to always only have 3 numbers, so if its single digit there is 2 decimals, double digit would have 1 decimal and triple digit would have zero decimals.

I would appreciate if anyone could write the code i need to add to make this happen.
Currently I’m using the following code:

 let renderTimer = false
 $w.onReady(function () {

    function countElement(element, startValue, endValue, prefix = "", suffix = "") {
            
             const duration = 3000;
             const increment = (endValue - startValue) / (duration / 20);
             let currentValue = startValue;
			 
     
             const timer = setInterval(() => {
                 currentValue += increment;
                 $w(element).text = prefix + `${(Math.round(currentValue)).toLocaleString('da-DK')}${suffix}`;
     
                 if (currentValue >= endValue) {
					 $w(element).text = prefix + `${endValue.toLocaleString('da-DK')}${suffix}`;
                     clearInterval(timer);
                 }

             }, 20);
         }
     
     
  
     $w('#section2'). onViewportEnter(async () =>{
         if (!renderTimer) {
             await countElement("#text33", 2000,6060 , "", "%");
             await countElement("#text36", 2000,6260 , "", "%");
             renderTimer = true
         }
	 })
});