The act of displaying time is quite popular on the web. But it’s not at all limited to what we typically wear on our wrist or hang on the wall.
Sure, a traditional clock can add to the aesthetic of a website or app. However, that’s only genuinely useful in certain situations, considering our device screens already display the basics.
An area where time really shines is in counting up or down. Whether you’re displaying the elapsed time of an event such as an online quiz or the amount of days until a big product launch, these items can add a bit of excitement. Plus, they can play an important role in the overall user experience.
Let’s have a look at some code snippets that you can use to bring time-related functionality to your projects.
A High-Tech Vue
While our first example may fit in with more traditional timepieces, it also features an ultra-modern look. Built with Vue.js, it shows how design can add a welcome dash of personality to even the most basic of technologies.
A clock made up of…clocks? It may sound far-out, but that’s exactly what this CSS-only snippet is. Watch the “hands” on selected mini-clocks shift in unison to count up elapsed time. Like the finest Swiss watches, the movements are incredibly intricate.
Countdown to Launch
Countdowns are widely used to build anticipation for a big event. Maybe it’s a new product, a conference or even a movie premiere. They’re equally fun and useful. This attractive example offers a 24-hour countdown in a classic “flip” style.
The Next Holiday Is Always Right Around the Corner
A countdown can also benefit eCommerce sites that want to focus on a specific holiday. In this case, it’s Independence Day in the U.S.A. But a dressed-up element such as this could be a great touch for virtually any special day that you’d like to call attention to.
Splash screens seem to be making a comeback. But instead of leaving users to click through to the next step, a timed redirection can be a nice way to make your point without too much inconvenience. This old-school film countdown animation might be a perfect fit for such a use.
A Touch of Class
High-end timepieces never go out of style. With beautiful looks and precision movements, they capture the imagination. Here, we have a faithful recreation of a Rolex watch. Maybe not so useful for your everyday website, but something to admire nonetheless.
Synonymous with sports, stopwatches are used to time everything from Olympic races to Formula 1 lap times. In that spirit, this pure CSS recreation is both simple and beautiful. The movement is noticeable without being overwhelming.
Around the World
Perhaps the most relevant use for an online clock is to display readings from various time zones. This gorgeous snippet uses Vue.js and leverages the browser to show times from all over the globe. Notice how the display changes from day to night, depending on the time in the selected locale.
Implementing time, regardless of form, into your project adds an extra layer of detail. While it doesn’t necessarily have to be the main feature, it can serve as a means to inform and entertain.
So, whether you’re looking to add some interactivity to your website or just experimenting, there’s something for you in this collection. And if you’d like to see more examples, check out our CodePen collection.