MARKETPLACE
PLUGINS
COUNTDOWN/UP TIMER
CountDown/Up Timer logo

CountDown/Up Timer

Published June 2026
   •    Updated July 2026

Plugin details

Native Countdown/up Timer Pro is a Bubble mobile/native countdown and count-up timer built for Bubble’s new mobile plugin runtime.
Create polished timers for launches, offers, bookings, challenges, onboarding flows, reservations, events, quizzes, waitlists, and time-limited actions. The plugin supports multiple display styles including circular ring, progress bar, flip blocks, and compact badge layouts.

Key features
  • Countdown mode – count down from a duration in seconds.
  • Count up mode – start from 00:00:00 and count upward until the configured duration is reached.
  • Multiple timer layouts – circular ring, progress bar, flip blocks, and compact badge.
  • Custom colors – edit the timer text, circle, circle track, bar, bar track, badge, flip block, warning color, and more.
  • Workflow events – trigger Bubble workflows when the timer starts, pauses, resumes, resets, completes, or reaches the warning threshold.
  • Workflow actions – start, pause, resume, and reset the timer from Bubble workflows.
  • Mobile-native UI – designed for Bubble mobile apps and Bubble Go testing.

Important note
All non-color fields are intentionally empty by default, so you can fully configure the timer yourself. Color fields include sample values so the element is visible immediately after adding it to the page.

$5

One time

stars   •   0 ratings
1 installs  
This plugin does not collect or track your personal data.

Platform

Native mobile

Contributor details

CoDara logo
CoDara
Joined 2025   •   15 Plugins
View contributor profile

Instructions

How to use Native Countdown Timer Pro
1. Add the element
  • Install or test the plugin in your Bubble mobile app.
  • Go to the mobile page where you want the timer to appear.
  • Drag the Countdown element onto the page.
  • Resize the element based on the display style you want to use.

2. Choose the timer mode
  • Set Mode to Count Down if you want the timer to count down.
  • Set Mode to Count up if you want the timer to start from 00:00:00 and count upward.

3. Enter the duration
  • Use Duration seconds to control how long the timer runs.
  • Example: enter 10 for a 10-second timer.
  • Example: enter 60 for a 1-minute timer.
  • Example: enter 3600 for a 1-hour timer.

4. Control auto start
  • Set Auto start to yes if the timer should begin automatically when the page loads.
  • Set Auto start to no if you want to start the timer using a Bubble workflow action.

5. Set a warning threshold
  • Use Warning threshold seconds to trigger the warning state.
  • In countdown mode, the warning triggers when the remaining time is less than or equal to this value.
  • In count up mode, the warning triggers when the elapsed time reaches this value.
  • Example: if duration is 10 and warning threshold is 7, the warning event fires at 7 seconds.

6. Pick a display style
  • Circular ring shows a ring timer with the time in the center.
  • Progress bar shows the time above a horizontal progress bar.
  • Flip blocks shows days, hours, minutes, and seconds as separate blocks.
  • Compact badge shows a small pill-style timer.

7. Customize labels
  • Use Show labels to show or hide labels in flip block mode.
  • Use Days label, Hours label, Minutes label, and Seconds label to customize the unit text.
  • Example labels: Days, Hours, Mins, Secs.

8. Customize colors
  • Use Time text color to change the timer number color.
  • Use Circle color and Circle track color for circular ring mode.
  • Use Bar color and Bar track color for progress bar mode.
  • Use Compact badge color and Compact badge text color for badge mode.
  • Use Flip background color, Flip border color, Flip value color, and Flip label color for flip block mode.
  • Use Warning color to style the timer when the warning threshold is reached.

9. Use workflow events
  • started fires when the timer starts.
  • paused fires when the timer is paused.
  • resumed fires when the timer resumes.
  • reset fires when the timer is reset.
  • completed fires when the timer reaches the end.
  • warning_threshold_reached fires when the warning threshold is reached.

10. Use workflow actions
  • Use Start timer to start the timer manually.
  • Use Pause timer to pause the timer.
  • Use Resume timer to continue after pausing.
  • Use Reset timer to restart the timer from the beginning.

Example setup for count up testing
Mode: Count up Duration seconds: 10 Auto start: yes Warning threshold seconds: 7 Display mode: Progress bar Show labels: yes

Example setup for countdown testing
Mode: Duration Duration seconds: 60 Auto start: yes Warning threshold seconds: 10 Display mode: Circular ring Show labels: yes

Demo page
Open the Countdown demo page

Live editor page
Open the Countdown live editor page

Types

This plugin can be found under the following types:
Element   •   Event   •   Action

Categories

This plugin can be found under the following categories:
Technical   •   Productivity   •   Customer Support   •   Small Business   •   Chart   •   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble logo
Product
AI
Mobile
Design
Data
Logic
Collaboration
Security
Status
Release notes
Bubble for
Founders
Developers
Agencies
Enterprise
Discover
How Bubble works
Examples
Bubble is Global
Pricing
Learn
Academy
Technical guides
Blog
How to build
Coaching
Resources
Connect to AI
Marketplace
Templates
Plugins
Experts
Bootcamps
Certification
Partnerships
Affiliates
Figma to Bubble
Community
Bubble community
Forum
Newsletter
Podcast
Ideaboard
Early access
Company
About
Careers
Brand guidelines
Support
Contact us
Legal
Terms
Privacy
©  2026, Bubble Group, Inc. All rights reserved.
Bubble
Pricing
Enterprise
Contact sales