Discover the best clock websites created by professional designers. Get inspired and start planning your perfect clock web design today!

An automatic timezone clock for cities around the world 🌍

Show the current local time for your city. It keeps itself up to date every 60 seconds. I've used CSS to add a blinking effect.

How it works:
It uses data attributes to define the timezone. I've written code to calculate and display the local time of your city. There are separate colours for "Open", "Evening", and "Closed" office hours. These can be styled through their respective classes.

How to use:
1) Find your timezone: https://timezonedb.com/time-zones

2) The "Location Row" element contains a single data-timezone attribute. Change the value to your timezone. Everything else will auto-update :)

You can change the opening/ closing hours & messages in custom code. The design was inspired by https://practice.inc

Time in City

Local Timezones [Utility]

Looking to add a countdown or number count up to your website? Clone our free countdown animation Webflow Template and add it to your website as easy as 1, 2, 3.

- - - - - - - - - -

Interested in this free Webflow Cloneable?

• Check out a live preview on: https://countdown-cloneable-brixtemplates.webflow.io/

• Click 'Clone project' to get a clone on your Webflow account

• Looking for a tutorial on how to easily customize this Webflow cloneable? Check out this video tutorial we created: https://youtu.be/cEen998kChc

- - - - - - - - - -

• BRIX Templates - Looking for more Webflow templates? Take a look at our collection of premium & free Webflow Templates on https://brixtemplates.com/

• BRIX Agency - Looking for a hand to design & develop an amazing Webflow website? Get in touch with our amazing team on https://brixagency.com/

26. Countdown Animation Webflow Cloneable Template - BRIX Templates

Countdown / Countup Animation Webflow Template | BRIX Templates

A simple countdown timer than can easily be customised. 

The timer can be set to countdown to a time in a specific timezone. i.e. 15:00 British Summer Time - and the countdown will take into account the users current time (timezone) to give the correct countdown time.

Example timezone set to “Europe/London” using moment.js. You will need to adjust this to the timezone that you want to use.

Countdown Clock (Timer) Widget

DEMO - Countdown Clock Timer Widget

Welcome to Daily Interaction #112.

This demo showcases a button animation on hover. With these buttons the border looks like it is cut at two specific points making the line look segmented. When you hover over the button the lines seem to move in a clock-wise fashion, and then in reverse when hovering out. This effect was achieved by placing two skewed div blocks at the top and bottom of the button with the same color as the background. The div block were also placed precisely on top of the button border. This makes it look like the border is being cut. Then those two block are moved left and right on hover to make it seem like the lines are moving. It's a subtle effect, but I think it can be very interesting as a hover state for a button, so the user knows something will happen when they click on it.

To view more daily interactions and premium content visit:
https://www.webdevforyou.com/

WebDev for You - Daily Interaction #112

WebDev For You - Daily Interaction #112

Tiny vanilla JS clock, needs an attribute and can be configured with timezones. All info in /body tag.

👀

clockjs

clock ⟋ js

Here are 10 different ways to display time in your projects. 

Super easy to implement, just copy and paste the component. 

Details:

✔ Simple script
✔ Using Finsweet client-first v1
✔ Different options

Sign up for the lesson: www.webflowtips.com/b/how-to-add-time-to-your-webflow-site

If you have any questions feel free to comment.

P.S Like or follow if this was useful for you 🙂 🙌

Time

Time - 10 different options

Ok ok, so it's not an atomically accurate stopwatch (performance may vary), and it's DEFINITELY not the best way to "code" a stopwatch... but it was fun to make.

--

⬛️ ⬛️ ⬛️ ⬛️ ⬛️ 🔲
Native Interactions

⬛️ 🔲 🔲 🔲 🔲 🔲
Custom Code (just a 🤏)

--

Follow me on Twitter: https://twitter.com/kevinhaag
Subscribe on Youtube: https://youtube.com/kevinhaagsucks

Stopwatch Timer

MM—010: Stopwatch Timer

This virtual timer was modelled after a clever countdown timer design by timetimer.com. 

The website + visual interactions were made in Webflow, the audio is from Freesound.org, the red circle animation is from Lottiefiles.com, and the code which plays the audio was generated by me in ChatGPT.

Scroll down past the instructions to see a quick video tutorial which explains how it works. 

Timer Instructions

60 Minute Time Timer
Refresh the page. The timer resets itself to 60 minutes anytime the page reloads. 

55-5 Minute Time Timer
Simply hover and click on the time you want. This will wind the virtual timer automatically and begin the countdown. When time is up, a relaxing and slow-to-build audio file will begin to play.

How to Build a Virtual Timer
The following video is about 8 minutes long and explain how the project works. If you have questions, feel free to leave a comment in the Loom video. https://www.loom.com/share/fb8acac0da6245959fbe4e26574d550c

Discover clock websites built by the Webflow community

Discover clock websites built by the Webflow community