A Custom Element for an Analog Clock/Stopwatch Web Component

Analog Clock Element is a highly customizable stopwatch and clock element created with custom elements.

analog clock javascript, javascript analog clock code free download, javascript digital clock with date, javascript timer countdown with seconds, analog clock html code

How to make use of it:

1. Import the analog-clock-element.js into the doc.

<script src="analog-clock-element.js" defer></script>

2. Create an analog clock on the web page.

<analog-clock mode="clock"></analog-clock>

3. Create a stopwatch.

<analog-clock mode="stopwatch"></analog-clock>

4. Set the size of the stopwatch.

<analog-clock size="200"></analog-clock>

5. Specify the number of marks.

<analog-clock marks="4"></analog-clock>

6. Determine whether or not to show the hour numbers on the dial.

<analog-clock ticks="4"></analog-clock>

7. Customize the analog clock utilizing your individual CSS.

[marks="4"]::part(clock) {
  /* clock face */

[marks="4"]::part(tick) {
  /* or tick1 - tick12 */

[marks="4"]::part(marks) {
  /* marks */

[marks="4"]::part(hand-hour) {
  /* hour hand */

[marks="4"]::part(hand-minute) {
  /* minute hand */

[marks="4"]::part(hand-second) {
  /* second hand */

8. API strategies.

const instance = document.querySelector('.myClock');

// clock mode
instance.mode = 'clock' 

// stopwatch mode
instance.mode = 'stopwatch'

// start/stop the stopwatch

// reset the stopwatch

// get time elapsed in ms.


  • mode (string): stopwatch or clock.
  • size (number): Width and height in pixel.
  • marks (number): Number of markings on the edge of the clock for telling the time.
  • ticks (boolean): Whether to display the hour numbers on the dial.

Shadow Parts

  • ::part(tick): The numbers on the dial.
  • ::part(tick): The numbers on the dial.
  • ::part(tick1)::part(tick12): Each of the nubmers on the dial.
  • ::part(clock): The clock face.
  • ::part(marks): The markings on the edge of the clock.
  • ::part(hand-hour): The hour hand.
  • ::part(hand-minute): The minute hand.
  • ::part(hand-second): The second hand.


  • analogClock.mode = 'clock'/'stopwatch' switches mode between clock and stopwatch.
  • analogClock.toggleStopwatch() starts and stops the stop watch.
  • analogClock.resetStopwatch() resets stopwatch to 0.
  • analogClock.getTimeElapsed() get time elapsed in ms.

Analog Clock/Stopwatch Web Component, analog clock element Plugin/Github, javascript clock, html digital clock

See Demo And Download

Official Website(muan): Click Here

This superior jQuery/javascript plugin is developed by muan. For extra Advanced Usages, please go to the official website.

Related Posts


Responsive Multiple Selection Combo Box using Bootstrap 3 | MagicSuggest

MagicSuggest is an easy-to-use jQuery plugin for creating a combo menu that allows you to select multiple items from a dropdown list with typing and auto-complete support….


Material Design Inspired Tab UI In Vanilla JavaScript

Material Design tab vanilla JS implements a material design-inspired tab component with a click ripple effect and an active sliding menu cursor. Must Read: Responsive Accessible Tabs…


Simple Countdown Timer App In jQuery

The countdown is a front-end application that allows starting the countdown with two options: set a target date or write the number of countdown days. A countdown…


Add Animation to Your HTML5 Pages | animate.js

animate.js is a small JavaScript library that provides a convenient way to apply CSS animations powered by Animate.css to DOM elements without writing any CSS. Easily apply…


Responsive Hover Parallax Cards With Vuejs

Vue Responsive Parallax Cards Hover Create response cards with a scroll-triggered parallax effect in your Vue.js application. Must Read: jQuery Sliding Display Your Content Like a Deck…


Responsive Pure CSS Only Accordion & Tabs Component

Responsive pure CSS accordion tabs and tabs will automatically convert to a vertical accordion interface on mobile devices. Must Read: Create Dynamic Accordion Giving JSON Data Using…