Clock
<o-clock> is an analog clock or watch face, live or set to a time.
The dial is the universe: ticks are vectors on orbit-11, numerals are satellites on orbit-9, and the hands are vectors on the center orbit, turned with --o-angle-composite. Sub-dials are satellites that hold a universe of their own. A live clock only moves its hands; the face is built once.
Presets
classic, roman, minimal, chrono and smartwatch. As with instruments, any attribute you write wins over the preset.
Attributes
| Attribute | Default | What it does |
|---|---|---|
time | now | A fixed time, HH:MM or HH:MM:SS. |
live | off | Follows the real clock, once a second. |
smooth | off | A sweeping second hand, redrawn every frame. Implies seconds. |
seconds | off | Shows the second hand. |
numerals | arabic | arabic, roman or none. |
case | round | round, square, rounded or rectangle. |
dial | round | oval stretches the dial to follow the case; rings replaces the hands with three activity rings. |
digital | off | A digital time below the center. |
date | off | A date window at 3 o'clock. |
brand | A name above the center. | |
subdials | off | Chronograph sub-dials: small seconds, 24 hours and date. They replace digital and date. |
accent / hand-color / tick-color | Second hand and cap, hour and minute hands, minute ticks. | |
face / bezel / case-bg | Dial background, its rim and the case around it. | |
hour-color / minute-color / second-color | Ring colors of dial="rings". | |
size | 300px | Width of the widget. A rectangle case is 1.26 times as tall. |
glow | off | A glow on the hands. |
theme | dark, light or glass. Also inherited from an ok-theme-* class on a container. See Shared options. |
Styling
| Property | Falls back to | What it does |
|---|---|---|
--ok-clock-accent | --ok-accent | Second hand, cap, brand. |
--ok-clock-hand | Hour and minute hands. | |
--ok-clock-face | --ok-face | Dial background. |
--ok-clock-bezel | --ok-bezel | Dial rim. |
--ok-clock-case-bg | --ok-case | Case around a non-round dial. |
--ok-clock-tick | --ok-tick | Minute ticks. |
--ok-clock-tick-h | Hour ticks. | |
--ok-clock-numeral | --ok-text | Numerals and readouts. |
--ok-font-size | Base text size, 7.5cqmin by default. |
More examples
A tonneau watch
Activity rings for hours, minutes and seconds
A light face
Accessibility
The clock has role="img" and its time as the name, like “10:08:30”. The name follows the time, but a screen reader does not announce each change. Set aria-label to give it a fixed name, such as “Time in Tokyo”. The live loop stops while the clock is out of the document.