Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬Register for the Oct 27 webinar.

Display count down and call a callback

Hi,

I want to make a web page and display a count down for example 5 minutes. It will count from 05:00.00 to 00:00.00 in 10ms interval. There will be a start button to start the timer. Timer will be shown on page as format 04:45.23.

After reaching 0, I want to display something (text in div or span).

How is it possible?

Hey @kahlenberg There is a pull request in the queue for a new dcc.Timer component that will make this super easy to do. You can track the progress and see a preview here:

Ok, thank you but I need this functionality now :slight_smile:
So, I implemented my own rudimentary timer callback with desired functionality:

time_interval_s = 120
time_interval_ms = time_interval_s * 1000

...
@app.callback(
        Output("timer_display", "children"),
        Input("interval-component", "n_intervals"),
)
def update_output(n):
    #calculate remaining time in ms
    remaining = time_interval_ms - (n * 100)

    minute = (remaining // 60000)
    second = (remaining % 60000) // 1000
    milisecond = (remaining % 1000) // 10
    return u'{:02d}:{:02d}.{:02d}'.format(minute, second, milisecond)