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 10.18.0.

 

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: 2.0.0
Framework Version: 10.18.0
Release Notes: Countdown circle timer in a circle shape with color and progress animation in Native. **Dependencies:** • Mendix modeler 10.18.0. **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)
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)