10 Best Analog Clocks In JavaScript (2026 Update)
A basic analog clock only needs to show the local time, but many projects call for more, such as multiple time zones, alarms, custom clock faces, or a specific Canvas or SVG style.
This list includes 10 jQuery and vanilla JavaScript plugins, libraries, and code examples for these different clock setups.
Keep reading to find an analog clock that works for your project and the features you actually need.
Originally Published Oct 27 2020, updated Sep 17 2026
Table of contents:
- Quick Comparison
- jQuery Analog Clock Plugins & Examples
- Vanilla JS Analog Clock Libraries & Examples
- Related Clock & Time Resources
Quick Comparison
| Clock | Stack | Best For |
|---|---|---|
| Global Timezone & Dark Mode Clock | jQuery | Local clock + selected world time |
| htAnalogClock | jQuery, Canvas | Timezone clock with presets |
| jClocksGMT.js | jQuery | Multiple world clocks |
| Digital & Analog Clocks | jQuery | Simple clock code |
| thooClock | jQuery, Canvas | Legacy alarm clock |
| Clock.js | Vanilla JS, SVG | Lightweight embedded clock |
| Clock UI | Vanilla JS | Animated configurable clocks |
| shonir-analog-clock | Vanilla JS | Multi-city world clocks |
| MagicClock | Vanilla JS, Canvas | Custom clock artwork |
| Neumorphic Analog Clock | Vanilla JS | Dark/light clock UI |
Best jQuery Analog Clock Plugins & Examples
Analog/Digital Clock with Global Timezone and Dark Mode Support
This jQuery and CSS example pairs a local analog/digital clock with an IANA timezone selector that shows the date and time for another location. It also has AM/PM output, a date display, and a light/dark theme switch.
Customizable Analog Clock With Timezone Support - htAnalogClock
htAnalogClock is a jQuery plugin that renders responsive analog clocks on HTML5 Canvas. It has seven presets, clock-face styling controls, hand and tick settings, and IANA timezone values such as America/Los_Angeles.
jQuery Based Analog And Digital World Clock - jClocksGMT.js
jClocksGMT.js creates analog and digital world clocks from GMT offsets. Multiple instances work well for city lists, office locations, support desks, and other pages that display several time zones together.
Digital And Analog Clocks With JavaScript (jQuery)
A compact jQuery code example that displays local time in both digital and analog formats. The source is useful when you want both clock styles in a small implementation with no larger plugin API.
Customizable Analog & Alarm Clock with jQuery and Canvas - thooClock
thooClock is a legacy jQuery Canvas clock with alarm callbacks, custom numerals, configurable hand colors, time correction, and ticking or sweeping seconds. The official repository is deprecated and no longer maintained. Keep it for existing jQuery projects that already depend on the plugin.
Best Vanilla JS Analog Clock Libraries & Examples
Simple & Clean Analog Clock JS Library – Clock.js
Clock.js is a lightweight vanilla JavaScript library that renders a responsive analog clock with SVG and CSS transforms. A UTC offset controls the displayed timezone, and the second hand can be shown or hidden.
Animated Analog Clocks for Vanilla JS, React & Vue.js – Clock UI
Clock UI has live and static analog clocks for vanilla JavaScript, React, and Vue. The vanilla DOM package accepts IANA timezone strings, smooth sweep seconds, Roman numerals, cardinal-only labels, tick controls, and runtime methods such as start(), stop(), setTimezone(), and destroy().
Multiple Timezone Analog Clocks – shonir-analog-clock
shonir-analog-clock is a small vanilla JavaScript library for displaying several analog clocks with different IANA timezones. Each instance can represent a city or office location in a multi-clock world-time layout.
Create Customizable Analog Clocks With JavaScript – MagicClock
MagicClock renders analog clocks on HTML5 Canvas and accepts custom images for the clock face, hour hand, minute hand, and second hand. Custom face and hand artwork works well for branded clocks and image-based designs.
Neumorphic Style Analog Clock
A plain JavaScript and CSS analog clock example with Neumorphic styling and light/dark themes. It focuses on the clock face and theme toggle as a compact UI example.
Related Clock & Time Resources
- Find More jQuery Analog Clock Plugins & Examples
- Find More Vanilla JavaScript Analog & Digital Clocks
- 10 Best Countdown Timer Plugins In JavaScript
- 10 Best Date And Time Picker JavaScript Plugins
