A customizable countdown timer with an optional animated circular progress ring. You can control the countdown duration and speed via an action.
The timer supports pause, reset, and responds to Bubble font styles, width, height, and colors. You can also change the progress ring thickness and colors.


Element Properties (Inputs):

circle (yes/no): Whether to show a circular progress ring.

pausedColor (color): The color of the ring when the timer is paused.

progressColor (color): The color of the animated arc during countdown.

trackColor (color): The background color of the ring (track).

thickness (number): How thick the circular ring should be (in pixels).

The element also inherits all Bubble styling like:

Width and height (to resize the entire timer)

Font face

Font size

Font color

Bold, italic, underline

Text alignment

Exposed States:

remaining: The number of seconds left in the countdown.

isRunning: Whether the timer is currently counting down.

isPaused: Whether the timer is paused.

Triggered Events:

on_tick: Fires every second (or based on your speed setting).

on_complete: Fires when the timer reaches zero.

Element Actions:

Start Timer
Starts the timer with custom duration and speed.

duration (number): Total seconds to count down from.

speed (number): Interval between ticks, in milliseconds (e.g. 1000 = 1 second).

Pause Timer
Pauses the countdown. The ring will stop progressing and switch to the pausedColor.

Reset Timer
Resets the countdown to zero and clears the progress ring.

Editor: https://bubble.io/page?id=ncv-react-plugins&test_plugin=1743969499169x902443763404636200_current&tab=Design&name=timer&type=page

Demo: https://ncv-react-plugins.bubbleapps.io/version-test/api/1.1/mobile/preview?debug_mode=true&preview_view=timer