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.

Documentation

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


Dependencies:

• Mendix modeler 9.12.4.


Features

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


https://github.com/bharathidas/Native-Words-Highilighter/issues


Releases

Version: 1.0.0
Framework Version: 9.12.4
Release Notes: Countdown circle timer in a circle shape with color and progress animation in Native. **Dependencies:** • Mendix modeler 9.12.4. **Features:** **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** https://github.com/bharathidas/Native-Words-Highilighter/issues **Screenshots:** ![Screenshot_1](https://github.com/bharathidas/Native-Countdown-Circle-Timer/assets/23263603/395cce05-e30b-4823-901c-c92ec18439c9) ![Screenshot_2](https://github.com/bharathidas/Native-Countdown-Circle-Timer/assets/23263603/d5884602-2eab-480e-9762-c498f083539c) ![Screenshot_3](https://github.com/bharathidas/Native-Countdown-Circle-Timer/assets/23263603/45ba34c2-b747-47ac-bf7f-0a9c71bbf416) ![Screenshot_4](https://github.com/bharathidas/Native-Countdown-Circle-Timer/assets/23263603/8780b48a-b098-44b0-b7ed-8a1975b2dcb9) ![MobileScreen1](https://github.com/bharathidas/Native-Countdown-Circle-Timer/assets/23263603/b5a21a6f-1a8f-47aa-896b-0bc02307fed0) ![MobileScreen2](https://github.com/bharathidas/Native-Countdown-Circle-Timer/assets/23263603/2a7ad30d-0ab6-429b-acb4-4fbdacbdcf4c)