Display an animated counter
Question

Hi All,

Is there any way we can display a number with it being animated from 0 to that number every time we refresh the page? 

Would appreciate it if anyone helps. Really need it




mvp_badge
MVP
Solution

Hi Ravi,

I created a Forge component based on your requirement....

Check this: https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=8968 

Sample App: https://sbsam.outsystemscloud.com/CountUp/CountUpDemo 


Hope this helps you!


Regards,

Benjith Sam

Benjith Sam wrote:

Hi Ravi,

I created a Forge component based on your requirement....

Check this: https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=8968 

Sample App: https://sbsam.outsystemscloud.com/CountUp/CountUpDemo 


Hope this helps you!


Regards,

Benjith Sam

Exactly what I wanted. Will definitely help others too.

Learnt how to implement js by looking at it. 

Thank you so much Sam!  

 

mvp_badge
MVP

Ravi Teja wrote:

Exactly what I wanted. Will definitely help others too.

Learnt how to implement js by looking at it. 

Thank you so much Sam!

You are welcome, Ravi :)

I'm happy that it helped you... Cheers!  :)


Regards,

Benjith Sam

mvp_badge
MVP

HI Ravi,

Follow this question it will help you.

https://www.outsystems.com/forums/discussion/62190/can-i-use-progress-circle-fraction-as-a-countdown-timer/ 

In this question we are using Progress circle you can use progress Counter or Simple you can use expression to show this type number.



Regards

Rahul Sahu

Rahul Sahu wrote:

HI Ravi,

Follow this question it will help you.

https://www.outsystems.com/forums/discussion/62190/can-i-use-progress-circle-fraction-as-a-countdown-timer/ 

In this question we are using Progress circle you can use progress Counter or Simple you can use expression to show this type number.



Regards

Rahul Sahu

 Hi Rahul, 

Thanks for the reply. The above implementation displays the value which increments as per timer seconds.

I am looking for this implementation: https://inorganik.github.io/countUp.js/ 

Could u help me with using the above js for displaying it on a couter widget or an expression?

 

Hi Ravi,

There are many sources that you can use to get a counter like that. I found also one on codepen. https://codepen.io/lukepeters/pen/DGowf

Besides the element you want to use, it is important to know if you want to use this on web of mobile/reactive.
So what kind of application is it? Web or mobile/reactive?  
This will be of influence on how to implement it.  


Martijn de Pijper wrote:

Hi Ravi,

There are many sources that you can use to get a counter like that. I found also one on codepen. https://codepen.io/lukepeters/pen/DGowf

Besides the element you want to use, it is important to know if you want to use this on web of mobile/reactive.
So what kind of application is it? Web or mobile/reactive?
This will be of influence on how to implement it.  


 Hi Martijn de Pijper,

I want to implement it on a reactive web app.

 

mvp_badge
MVP
Solution

Hi Ravi,

I created a Forge component based on your requirement....

Check this: https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=8968 

Sample App: https://sbsam.outsystemscloud.com/CountUp/CountUpDemo 


Hope this helps you!


Regards,

Benjith Sam

Benjith Sam wrote:

Hi Ravi,

I created a Forge component based on your requirement....

Check this: https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=8968 

Sample App: https://sbsam.outsystemscloud.com/CountUp/CountUpDemo 


Hope this helps you!


Regards,

Benjith Sam

Exactly what I wanted. Will definitely help others too.

Learnt how to implement js by looking at it. 

Thank you so much Sam!  

 

mvp_badge
MVP

Ravi Teja wrote:

Exactly what I wanted. Will definitely help others too.

Learnt how to implement js by looking at it. 

Thank you so much Sam!

You are welcome, Ravi :)

I'm happy that it helped you... Cheers!  :)


Regards,

Benjith Sam

Nice done, Ravi.

I was struggling with the JQuery, but you managed it good! 

I am sorry to write in this old post, but I was looking for a counter that can handle decimal numbers – very useful for any kind of finance application.

Thank you!

mvp_badge
MVP

Hi Andrea,

I have updated the CountUp component with the requested feature.


Kind regards,

Benjith Sam

Hi Benjith,

Thank you so much for updating this so quickly!

All best,

Andrea

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.