Native Countdown Circle Timer

Content Type: Widget

Categories: User Interface

Overview

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

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

• Mendix modeler 10.18.0.

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