Digital Clock Timer Countdown

Demo to preview the plugin:

Introduction

This plugin allows you to add a live clock to your app as well as countdowns and start/stop timers.
Usage Features:
  • Add a live digital clock display to your Bubble app
  • Create customizable countdown timers for events or deadlines
  • Implement start/stop timers for user tracking or game features
  • Update timers dynamically using workflows
  • Customize the time format and appearance
  • Display hours, minutes, seconds or full timestamps
  • Lightweight and responsive – works on all devices
  • Ideal for productivity tools, event apps, or live dashboards
Image without caption

How to setup

  1. Enable ID Attributes
    1. Go to the settings page in your editor. Under the General tab click on the checkbox “Expose the option to add an ID attribute to HTML elements”.
      App Settings → General Tab.
      App Settings → General Tab.
  1. Add the “Countdown” element to your page
      • In your Bubble editor, go to the Design tab.
      • Search for the Countdown element.
      • Drag it onto your page.
    1. Configure the Countdown element
      1. Click on the Countdown element and you will see a field called:
        Minutes
        • If you enter 60, the countdown will run for 1 minute.
        • If you enter 300, it will count down 5 minutes.
        • If you enter 5, it will only count 5 seconds.
    1. Use workflows to control clocks
      1. The Countdown element cannot be started or stopped with workflows. If you want to control a timer manually, for example, start or stop it with a button use the Stop/Start Clock element.
        How to use it:
        • Add the Stop/Start Clock element to your page.
          • Set an ID Attribute (e.g., clock1).
          • In the Workflow tab, create a workflow:
            • Action → Plugins → Start A Stop/Start Clock
              • Choose the element by its ID.
              • To stop it, use the action: Stop A Stop/Start Clock.

          Plugin Element Properties

          Countdown

          Fields:
          Title
          Description
          Type
          Minutes
          The minutes that the countdown should count down from. Example: Setting minutes to 60 will make the counter count down from 1 minute to zero.
          Number

          Countup_from

          Fields:
          Title
          Description
          Type
          From_date
          The date that the counter should count up from.
          Date

          Countdown_to

          Fields:
          Title
          Description
          Type
          Countdown_date
          The date that the counter should count down to.
          Date

          Stop/start clock

          Clock

          Minute Countdown

          Fields:
          Title
          Description
          Type
          Seconds
          The number of seconds from which the counter should contdown to.
          Number

          Minute Countup

          Fields:
          Title
          Description
          Type
          Seconds
          The number of seconds from which the counter should start counting up from.
          Number

          Element Actions

          Start

          ”Start” refers to the action of initiating or launching a process, service, or application within a software plugin or API.

          Stop

          In the context of a software plugin or API, “Stop” typically refers to a command or function that terminates a process, operation, or task.

          Exposed states

          Title
          Description
          Type
          Isrunning
          “Isrunning” is a boolean function that checks if a specific process or task is currently running in a software plugin or API.
          Checkbox (yes/no)
          Image without caption

          Changelogs