countdown-with-color-changing-ring
Reactive icon

Countdown with Color Changing Ring

Stable version 1.0.0 (Compatible with OutSystems 11)
Uploaded
 on 13 November 2023
 by 
5.0
 (2 ratings)
countdown-with-color-changing-ring

Countdown with Color Changing Ring

Documentation
1.0.0

This component is used to show time countdown in a reactive application with a ring that gets smaller and changes color based on the time remaining.


For correct usage, you need to insert the "CountDownTimer" block in the place where you need the countdown to appear.

It uses Javascript and CSS to achieve the desired result.

Fill in the inputs with the hour, minutes or seconds you want the countdown to start from:

- Hours (not mandatory);

- Minutes (not mandatory);

- Seconds (mandatory);

-StartColor (not mandatory)

-EndColor (not mandatory)

-Height (not mandatory)

After that, you need to configure an handler to the "CountDownCompleted" event. With that you can control what kind of behavior you want in your application when the time is zero.