Free Webflow Functions

img

Chrome Extension

img
Back

Countdown Timer

Dynamic Webflow Countdown Timer with the best collection

Cloneable

Documentation

Documentation

Step 1

Copy the countdown <script> and paste into the <before closing body> of your page

                                <script src="https://flowgiri.com/js-library/countdown.min.js"></script>

Step 2

1. To create a countdown timer, first create a container div block. Then, add the flowgiri-countdown attribute to the div and set the targeted date as the attribute's value.

Name:

flowgiri-countdown

Value:

[targeted-date]

2. To display the countdown days, place an HTML element inside the flowgiri-countdown div and add the attribute flowgiri-countdown-days to it.

Name:

flowgiri-countdown-days

Value:

" "

3. To display the countdown hours, place an HTML element inside the flowgiri-countdown div and add the attribute flowgiri-countdown-hours to it.

Name:

flowgiri-countdown-hours

Value:

" "

4. To display the countdown minutes, place an HTML element inside the flowgiri-countdown div and add the attribute flowgiri-countdown-minutes to it.

Name:

flowgiri-countdown-minutes

Value:

" "

4. To display the countdown seconds, place an HTML element inside the flowgiri-countdown div and add the attribute flowgiri-countdown-seconds to it.

Name:

flowgiri-countdown-seconds

Value:

" "

Take idea from an example. 

 <div flowgiri-countdown="2023-07-10"> 
    <span flowgiri-countdown-days=" "> </span> 
    <span flowgiri-countdown-hours=" "> </span> 
    <span flowgiri-countdown-minutes=" "> </span> 
    <span flowgiri-countdown-seconds=" "> </span>   
</div>

Get the latest updates to your inbox.