Animated Analog Clocks for Vanilla JS, React & Vue.js – Clock UI

Clock UI is a lightweight JavaScript library that helps you create elegant, animated analog clocks in your Vanilla JS, React, or Vue applications.

It handles timezone conversions automatically and offers both static and live clock implementations with smooth animations.

Features:

• Real-time Updates: Live clocks automatically sync with system time and update every second, with optional smooth sweep animations for the second hand.
• Timezone Support: Built-in timezone support using IANA timezone strings lets you display time for any location without manual offset calculations.
• Fully Customizable: Configure appearance through CSS custom properties, including colors, fonts, hand styles, and visibility options for numbers and tick marks.
• Roman Numerals: Toggle between Arabic and Roman numeral displays with a single configuration option.

How To Use It (Vanilla JS):

This guide will focus on the Vanilla JS setup. For React and Vue, you can find detailed usage examples in the DOC directory of the package.

1. The DOM package works in any JavaScript environment without framework dependencies. Install and import it using your preferred package manager:

# Yarn
$ yarn add @clock-ui/dom

# NPM
$ npm install c@clock-ui/dom

# PNPM
$ pnpm install @clock-ui/dom

# BUN
$ bun add @clock-ui/dom

import { BaseClockUI, LiveClockUI } from "@clock-ui/dom";

// Static clock 
const staticClock = new BaseClockUI("#static");

// Live updating clock
const liveClock = new LiveClockUI("#live");

2. For projects without a build system, you can use CDN delivery. The library exposes a global clockui object when loaded via script tag:

<link rel="stylesheet" href="https://unpkg.com/@clock-ui/dom/base.css" />
<script src="https://unpkg.com/@clock-ui/dom/dist/index.js">

const clock = new clockui.LiveClockUI("#clock");

3. For ES module imports from CDN, use the unpkg ESM endpoint:

import { LiveClockUI, BaseClockUI } from "https://unpkg.com/@clock-ui/dom/dist/index.mjs";

4. Customize the analog clocks with the following options.

Option	Description	Type
hideSeconds	Hide the second hand.	boolean
useRoman	Use Roman numerals instead of Arabic.	boolean
cardinalOnly	Show only the 3, 6, 9, and 12 markers.	boolean
smoothSweep	Animate the second hand smoothly.	boolean
timezone	An IANA timezone string (e.g., “Europe/London”).	string
hours	The hour for a static BaseClock.	number
minutes	The minute for a static BaseClock.	number

const staticClock = new BaseClockUI("#clock",{
  /** Hide the second hand */
  hideSeconds: boolean,
  /** Hide hour numbers */
  hideNumbers: boolean,
  /** Use Roman numerals instead of Arabic */
  useRoman: boolean,
  /** Show only cardinal hour numbers (3, 6, 9, 12) */
  cardinalOnly: boolean,
  /** Remove clock border */
  noBorder: boolean,
  /** Hide all ticks */
  hideTicks: boolean,
  /** Hide major ticks (hour marks) */
  hideMajorTicks: boolean,
  /** Hide minor ticks (minute marks) */
  hideMinorTicks: boolean,
  /** Enable dual-tone styling */
  dualTone: boolean,
}),

5. API methods.

Method	Description
update(options)	Update the time on a BaseClock.
start()	Start the animation on a LiveClock.
stop()	Stop the animation on a LiveClock.
setTimezone(tz)	Change the timezone dynamically.
destroy()	Clean up the clock instance.

6. Restyle the analog clocks using CSS variables:

:root {
  --cui-font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --cui-font-family-roman: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;

  /* --cui-face-color: #E8EBE4;
  --cui-frame-color: #13293D;
  --cui-tick-color: #13293D;
  --cui-number-color: #13293D;
  --cui-info-color: #13293D;

  --cui-hand-color: #13293D;
  --cui-hand-accent-color: #E8EBE4;

  --cui-hour-hand-color: #13293D;
  --cui-hour-hand-accent-color: #E8EBE4;
  --cui-minute-hand-color: #13293D;
  --cui-minute-hand-accent-color: #E8EBE4;
  --cui-second-hand-color: #F55D3E;
  --cui-pin-color: #13293D; */

  --cui-bg-color: #E8EBE4;
  --cui-primary-color: #13293D;
  --cui-secondary-color: #E8EBE4;
  --cui-accent-color: #F55D3E;
}

Related Resources:

• 10 Best Analog Clocks In JavaScript

The post Animated Analog Clocks for Vanilla JS, React & Vue.js – Clock UI appeared first on CSS Script.