Chronometer

An analog watch face with menu items at hour positions. The second-hand sweeps continuously; click any hour position to "set" the menu (hand snaps to that hour).

Pure CSS MIT licensed

Chronometer the 20th of 21 designs in the 21 CSS Circular & Radial Menu Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.

Live preview

Open in playground

The code

<div class="ccm-chrono">
  <input type="radio" name="ccm-chrono" id="ccm-chrono-3" hidden checked />
  <input type="radio" name="ccm-chrono" id="ccm-chrono-6" hidden />
  <input type="radio" name="ccm-chrono" id="ccm-chrono-9" hidden />
  <input type="radio" name="ccm-chrono" id="ccm-chrono-12" hidden />
  <div class="ccm-chrono-face"></div>
  <div class="ccm-chrono-hand" aria-hidden="true"></div>
  <label for="ccm-chrono-12" class="ccm-chrono-i" style="--a: 0deg" aria-label="12">12</label>
  <label for="ccm-chrono-3" class="ccm-chrono-i" style="--a: 90deg" aria-label="3">3</label>
  <label for="ccm-chrono-6" class="ccm-chrono-i" style="--a: 180deg" aria-label="6">6</label>
  <label for="ccm-chrono-9" class="ccm-chrono-i" style="--a: 270deg" aria-label="9">9</label>
</div>

.ccm-chrono {
  position: relative;
  width: 190px;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  --hand: 90deg;
}

.ccm-chrono-face {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f5f5f5, #d8d8d8);
  border: 3px solid #2a2a3e;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.4);
}

.ccm-chrono-hand {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 60px;
  margin-left: -1.5px;
  background: #2a2a3e;
  border-radius: 1.5px;
  transform-origin: top center;
  transform: rotate(var(--hand));
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ccm-chrono-hand::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: -2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff3d6e;
}

.ccm-chrono:has(#ccm-chrono-3:checked) {
  --hand: -90deg;
}

.ccm-chrono:has(#ccm-chrono-6:checked) {
  --hand: 0deg;
}

.ccm-chrono:has(#ccm-chrono-9:checked) {
  --hand: 90deg;
}

.ccm-chrono:has(#ccm-chrono-12:checked) {
  --hand: 180deg;
}

.ccm-chrono-i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  color: #2a2a3e;
  font:
    700 13px/28px Georgia,
    serif;
  text-align: center;
  cursor: pointer;
  transform: rotate(var(--a)) translate(70px) rotate(calc(var(--a) * -1));
  transition:
    background 0.2s,
    color 0.2s;
}

.ccm-chrono-i:hover {
  background: rgba(255, 61, 110, 0.15);
  color: #ff3d6e;
}

More from 21 CSS Circular & Radial Menu Designs

Hexagonal Honeycomb Rotating Triangle Trio Vinyl Record Compass Rose Iris Aperture Black Hole Nebula Cloud Mission Hub Service Orbit Tactile Dial Fan Reveal Petal Fan

View the full collection →