Analog Clock/Stopwatch Web Component Examples

A highly customizable analog clock & stopwatch component built using Custom Elements.

<analog-clock class="js-stopwatch"></analog-clock>

<analog-clock size="200" ticks="false" marks="4"></analog-clock>

<analog-clock size="17" ticks="false" marks="0"></analog-clock>
<style>
  [size="17"]::part(clock)::before,
  [size="17"]::part(hand-sec) { display: none; }
  [size="17"]::part(hand-min) { margin-left: 1px; background-color: black; }
  [size="17"]::part(hand-hour) { height: 40%; margin-top: 10%; min-height: auto; }
</style>

(analog clock in the macOS menu bar)

<style>
  .part-demo::part(tick) { color: #eee }
  .part-demo::part(tick12), 
  .part-demo::part(tick9), 
  .part-demo::part(tick6), 
  .part-demo::part(tick3) { 
    color: #111
  }
</style>

<analog-clock class="part-demo" marks="0"></analog-clock>

<style>
  .part-demo-2::part(hand-sec) { display: none; }
  .part-demo-2::part(hand-hour) { border: 1px solid; }
</style>

<analog-clock class="part-demo-2"></analog-clock>