Countdown circle timer in a circle shape with color and progress animation in Native.



  • Mendix modeler 9.12.4.


Duration:The total seconds for the countdown!

Colors:Pick one color or a rainbow array. Give a URL for gradients.

ColorsTime: With an array of colors, set the time to switch colors.

IsPlaying: Control the countdown - play or pause it!

InitialRemainingTime: Set a different starting time if you want.

UpdateInterval: Choose how often you want the timer to update.

Size: Customize the width and height of your countdown SVG.

StrokeWidth: Set the thickness of the countdown path.

TrailStrokeWidth: Decide the thickness of the trailing path.

StrokeLinecap: Pick the style of the countdown path's end - round, square, or butt.

Rotation: Make it go clockwise or counter-clockwise.

IsGrowing: Switch up the countdown - make it grow instead of shrink.

TrailColor: Choose the color of the trail circle.

IsSmoothColorTransition: Decide if the colors transition smoothly or not

Action can be called when the timer hits 0

Issues, suggestions and feature requests